@extends('admin.layouts.app')
@section('content')


<section class="content">
    <!-- Default box -->

    <div class="container-fluid">

        <div class="container">
            <div class="p-1 bg-dark d-flex align-items-center justify-content-between">
                <p class="p-1 mb-0">RFID DEVICES</p>
                <a class="p-1 btn btn-primary" href="" type="button" data-title="create" data-toggle="modal" data-target="#create">ADD RFID DEVICES</a>
            </div>
            <div class="row">


                <div class="col-md-12">
                    <div class="table-responsive">


                        <table id="mytable" class="table table-bordred table-striped">
                            <thead>

                                <th>Name</th>
                                <th>Connection Type</th>
                                <th>Port</th>
                                <th>IP Address </th>
                                <th>Frequency (Min)</th>
                                <th>Frequency (Max)</th>
                                <th>Reader Interval</th>
                                <th class="text-center" colspan="3">Action</th>
                            </thead>
                            <tbody>
                                <tr>

                                    <td>RFID Big Reader OLD</td>
                                    <td>HTTP/Net</td>
                                    <td>6000</td>
                                    <td>192.168.1.21</td>
                                    <td>865</td>
                                    <td>868</td>
                                    <td>1000</td>

                                    <td class="text-center">
                                        <p data-placement="top" data-toggle="tooltip" title="Edit">
                                            <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit">
                                                <i class="fas fa-edit"></i>
                                            </button>

                                        </p>

                                        <p data-placement="top" data-toggle="tooltip" title="Delete">
                                            <button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>

                                        </p>

                                    </td>
                                    <td class="text-center">

                                        <p data-placement="top" data-toggle="tooltip" title="Connect">
                                            <button class="btn btn-primary btn-xs">
                                                <i class="fas fa-link  "></i>
                                            </button>
                                        </p>
                                        <p data-placement="top" data-toggle="tooltip" title="Disconnect">
                                            <button class="btn btn-danger btn-xs">
                                                <i class="fas fa-power-off  "></i>
                                            </button>
                                        </p>

                                    </td>
                                    <td class="text-center">
                                        <p data-placement="top" data-toggle="tooltip" title="Start Reader">
                                            <button class="btn btn-primary btn-xs">
                                                <i class="fas fa-play  "></i>
                                            </button>
                                        </p>

                                        <p data-placement="top" data-toggle="tooltip" title="Stop Reader">
                                            <button class="btn btn-danger btn-xs">
                                                <i class="fas fa-stop  "></i>
                                            </button>
                                        </p>
                                    </td>
                                </tr>
                                <tr>

                                    <td>Desktop Reader</td>
                                    <td>COM/USB</td>
                                    <td>6</td>
                                    <td>-</td>
                                    <td>865</td>
                                    <td>868</td>
                                    <td>1000</td>

                                    <td class="text-center">
                                        <p data-placement="top" data-toggle="tooltip" title="Edit">
                                            <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit">
                                                <i class="fas fa-edit"></i>
                                            </button>

                                        </p>

                                        <p data-placement="top" data-toggle="tooltip" title="Delete">
                                            <button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>

                                        </p>

                                    </td>
                                    <td class="text-center">

                                        <p data-placement="top" data-toggle="tooltip" title="Connect">
                                            <button class="btn btn-primary btn-xs">
                                                <i class="fas fa-link  "></i>
                                            </button>
                                        </p>
                                        <p data-placement="top" data-toggle="tooltip" title="Disconnect">
                                            <button class="btn btn-danger btn-xs">
                                                <i class="fas fa-power-off  "></i>
                                            </button>
                                        </p>

                                    </td>
                                    <td class="text-center">
                                        <p data-placement="top" data-toggle="tooltip" title="Start Reader">
                                            <button class="btn btn-primary btn-xs">
                                                <i class="fas fa-play  "></i>
                                            </button>
                                        </p>

                                        <p data-placement="top" data-toggle="tooltip" title="Stop Reader">
                                            <button class="btn btn-danger btn-xs">
                                                <i class="fas fa-stop  "></i>
                                            </button>
                                        </p>
                                    </td>
                                </tr>
                                <tr>

                                    <td>Laundry</td>
                                    <td>HTTP/Net</td>
                                    <td>0</td>
                                    <td>192.168.0.100</td>
                                    <td>865</td>
                                    <td>868</td>
                                    <td>1000</td>

                                    <td class="text-center">
                                        <p data-placement="top" data-toggle="tooltip" title="Edit">
                                            <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit">
                                                <i class="fas fa-edit"></i>
                                            </button>

                                        </p>

                                        <p data-placement="top" data-toggle="tooltip" title="Delete">
                                            <button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>

                                        </p>

                                    </td>
                                    <td class="text-center">

                                        <p data-placement="top" data-toggle="tooltip" title="Connect">
                                            <button class="btn btn-primary btn-xs">
                                                <i class="fas fa-link  "></i>
                                            </button>
                                        </p>
                                        <p data-placement="top" data-toggle="tooltip" title="Disconnect">
                                            <button class="btn btn-danger btn-xs">
                                                <i class="fas fa-power-off  "></i>
                                            </button>
                                        </p>

                                    </td>
                                    <td class="text-center">
                                        <p data-placement="top" data-toggle="tooltip" title="Start Reader">
                                            <button class="btn btn-primary btn-xs">
                                                <i class="fas fa-play  "></i>
                                            </button>
                                        </p>

                                        <p data-placement="top" data-toggle="tooltip" title="Stop Reader">
                                            <button class="btn btn-danger btn-xs">
                                                <i class="fas fa-stop  "></i>
                                            </button>
                                        </p>
                                    </td>
                                </tr>


                            </tbody>
                        </table>


                        <div class="clearfix"></div>
                        <nav aria-label="Page navigation example">
                            <ul class="pagination justify-content-center">
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#">Next</a>
                                </li>
                            </ul>
                        </nav>

                    </div>

                </div>
            </div>
        </div>


        <div class="modal fade" id="create" tabindex="-1" role="dialog" aria-labelledby="create" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header justify-content-between">
                        <h4 class="modal-title custom_align" id="Heading">ADD RFID DEVICES</h4>
                        <div>
                            <a href="#" type="button" id="previousBtn" class="previous">&laquo; Previous</a>
                            <a href="#" type="button" id="nextBtn" class="next">Next &raquo;</a>
                        </div>

                        <button type="button" class="btn-close m-0" data-dismiss="modal" aria-hidden="true"></button>

                    </div>
                    <div class="modal-body">
                        <form action="" method="">
                            <fieldset data-step="1" class="fieldset-container active">
                                <div class="form-row">
                                    <div class="col-sm-6">


                                        <div class="form-group">
                                            <label for="#t1">Name</label>
                                            <input class="form-control " type="text" id="t1" placeholder="RFID Big Reader OLD ">
                                        </div>
                                        <div class="from-group mb-3">
                                            <label for="#t2">Connection Type</label>
                                            <select class="form-select form-control" id="t2" aria-label="Default select example">
                                                <option selected>HTTP/Net</option>
                                                <option value="1">USB/COM</option>
                                                <option value="2">HTTP/Net</option>
                                                <option value="3">HTTP/Net/Post</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="#t3">Port / Com Address</label>
                                            <input class="form-control " type="text" id="t3" placeholder="Enter Port / Com Address">
                                        </div>
                                        <div class="form-group">
                                            <label for="#t4">IP Address</label>
                                            <input class="form-control " type="text" id="t4" placeholder="Enter IP Address">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="#t5">Frequency (min)</label>
                                            <input class="form-control " type="text" id="t5" placeholder=" Frequency (min)">
                                        </div>
                                        <div class="form-group">
                                            <label for="#t6">Frequency (max)</label>
                                            <input class="form-control " type="text" id="t6" placeholder=" Frequency (max)">
                                        </div>
                                        <div class="form-group">
                                            <label for="#t7">Reader Interval</label>
                                            <input class="form-control " type="text" id="t7" placeholder=" Reader Interval">
                                        </div>
                                        <div class="from-group mb-3">
                                            <label for="#t8">Room / Location</label>
                                            <select class="form-select form-control" id="t8" aria-label="Default select example">
                                                <option selected>Pleace select</option>
                                                <option value="1">Suite #5 - Mezzanine - Al Fizza Tower - Al Fizza Tower, Johar Chowrangi</option>
                                                <option value="2">NRL00159 - Ground - 159 - NRL</option>
                                                <option value="3">Suite #6 - Mezzanine - Al Fizza Tower - Al Fizza Tower, Johar Chowrang</option>
                                                <option value="4">Suite #4 - Mezzanine - Al Fizza Tower - Al Fizza Tower, Johar Chowrangi</option>
                                                <option value="5">NRL00161 - Ground - 161 - NRL</option>
                                                <option value="6">NRL00162 - Ground - 162 - NRL</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                            </fieldset>
                            <fieldset data-step="2" class="fieldset-container">
                                <div class="form-row">
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label for="">Antenna 1</label>
                                            <div class="form-check form-switch pl-5">
                                                <input class="form-check-input " type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">EN/DIS</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label for="">Antenna 2</label>
                                            <div class="form-check form-switch pl-5">
                                                <input class="form-check-input " type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">EN/DIS</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label for="">Antenna 3</label>
                                            <div class="form-check form-switch pl-5">
                                                <input class="form-check-input " type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">EN/DIS</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label for="">Antenna 4</label>
                                            <div class="form-check form-switch pl-5">
                                                <input class="form-check-input " type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">EN/DIS</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label for="">Antenna 5</label>
                                            <div class="form-check form-switch pl-5">
                                                <input class="form-check-input " type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">EN/DIS</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label for="">Antenna 6</label>
                                            <div class="form-check form-switch pl-5">
                                                <input class="form-check-input " type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">EN/DIS</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label for="">Antenna 7</label>
                                            <div class="form-check form-switch pl-5">
                                                <input class="form-check-input " type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">EN/DIS</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label for="">Antenna 8</label>
                                            <div class="form-check form-switch pl-5">
                                                <input class="form-check-input " type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">EN/DIS</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label for="">Antenna 9</label>
                                            <div class="form-check form-switch pl-5">
                                                <input class="form-check-input " type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">EN/DIS</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label for="">Antenna 10</label>
                                            <div class="form-check form-switch pl-5">
                                                <input class="form-check-input " type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">EN/DIS</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label for="">Antenna 11</label>
                                            <div class="form-check form-switch pl-5">
                                                <input class="form-check-input " type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">EN/DIS</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label for="">Antenna 12</label>
                                            <div class="form-check form-switch pl-5">
                                                <input class="form-check-input " type="checkbox" id="flexSwitchCheckDefault">
                                                <label class="form-check-label" for="flexSwitchCheckDefault">EN/DIS</label>
                                            </div>
                                        </div>
                                    </div>


                                </div>

                            </fieldset>

                            <fieldset data-step="3" class="fieldset-container">
                                <div class="form-row">
                                    <div class="col-sm-3">
                                        <div class="from-group mb-3">
                                            <label for="#">Antenna 1 Power</label>
                                            <select class="form-select form-control" id="" aria-label="Default select example">
                                                <option selected>0</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="from-group mb-3">
                                            <label for="#">Antenna 2 Power</label>
                                            <select class="form-select form-control" id="" aria-label="Default select example">
                                                <option selected>0</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="from-group mb-3">
                                            <label for="#">Antenna 3 Power</label>
                                            <select class="form-select form-control" id="" aria-label="Default select example">
                                                <option selected>0</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="from-group mb-3">
                                            <label for="#">Antenna 4 Power</label>
                                            <select class="form-select form-control" id="" aria-label="Default select example">
                                                <option selected>0</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="from-group mb-3">
                                            <label for="#">Antenna 5 Power</label>
                                            <select class="form-select form-control" id="" aria-label="Default select example">
                                                <option selected>0</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="from-group mb-3">
                                            <label for="#">Antenna 6 Power</label>
                                            <select class="form-select form-control" id="" aria-label="Default select example">
                                                <option selected>0</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="from-group mb-3">
                                            <label for="#">Antenna 7 Power</label>
                                            <select class="form-select form-control" id="" aria-label="Default select example">
                                                <option selected>0</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="from-group mb-3">
                                            <label for="#">Antenna 8 Power</label>
                                            <select class="form-select form-control" id="" aria-label="Default select example">
                                                <option selected>0</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="from-group mb-3">
                                            <label for="#">Antenna 9 Power</label>
                                            <select class="form-select form-control" id="" aria-label="Default select example">
                                                <option selected>0</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="from-group mb-3">
                                            <label for="#">Antenna 10 Power</label>
                                            <select class="form-select form-control" id="" aria-label="Default select example">
                                                <option selected>0</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="from-group mb-3">
                                            <label for="#">Antenna 11 Power</label>
                                            <select class="form-select form-control" id="" aria-label="Default select example">
                                                <option selected>0</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="from-group mb-3">
                                            <label for="#">Antenna 12 Power</label>
                                            <select class="form-select form-control" id="" aria-label="Default select example">
                                                <option selected>0</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>

                                            </select>
                                        </div>
                                    </div>


                                </div>
                            </fieldset>


                        </form>


                    </div>
                    <div class="modal-footer ">
                        <button type="submit" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span>Submit</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

        <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
                        <button type="button" class="btn-close " data-dismiss="modal" aria-hidden="true"></button>

                    </div>
                    <div class="modal-body">

                        <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>

                    </div>
                    <div class="modal-footer ">
                        <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>






    </div>
</section>



@endsection

@section('customJs')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        const fieldsets = $('.fieldset-container');
        let currentStep = 0;

        function showStep(step) {
            // Hide all fieldsets except the current one
            fieldsets.removeClass('active');
            fieldsets.eq(step).addClass('active');
        }

        $('#nextBtn').click(function() {
            currentStep = Math.min(currentStep + 1, fieldsets.length - 1);
            showStep(currentStep);
        });

        $('#previousBtn').click(function() {
            currentStep = Math.max(currentStep - 1, 0);
            showStep(currentStep);
        });
    });
</script>


@endsection