@extends('layout.master')
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<style>
   
    .table-responsive {
        overflow-x: visible !important;
    }
    .table-responsive > nav > .flex {
        display: flex !important;
        justify-content: center !important; /* Center align the pagination */
        margin-bottom: 20px !important; /* Add bottom margin */
    }
    .table-responsive > nav > .flex > span,
    .table-responsive > nav > .flex > a {
        background: #007bff !important;
        display: none !important;
    }
    .hidden > div > p {
        color: black !important;
    }
    .leading-5 > svg {
        width: 20px !important;
        color: #007bff !important;
    }
    .leading-5 {
        color: #007bff !important;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
    }
    th {
        background-color: #f2f2f2;
        color: #333;
        text-align: left;
    }
    #delete-button {
        display: none; /* Initially hide the delete button */
    }

nav>.flex{
    display: none !important;
}

</style>


<div class="section-body">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header row">
                    <div class="col-md-10">
                        <h4>QR CODES</h4>
                    </div>
                    @can('qrcode create')
                        <div class="col-md-2">
                            <a href="{{ route('qrcode.create') }}" class="btn btn-primary"><i class="fas fa-plus"></i></a>
                        </div>
                    @endcan
                    <div class="col-md-6">
                        <form action="{{ route('qrcode.search') }}" class="d-flex align-items-center" method="GET">
                            @csrf
                            <input type="text" value="{{ $query }}" name="search" placeholder="Search" class="form-control">
                            <input type="submit" placeholder="Search" style="margin-left: 10px;" value="Submit" class="form-control ms-3 btn btn-primary">
                        </form>
                    </div>
                    
                   
                    <div class="col-md-6 d-flex align-items-center justify-content-end">
                        <input type="checkbox" id="expire" onchange="javascript:getExpire();">
                        <label for="expire" style="margin-left: 10px;margin-top:10px;"><b>Expired</b></label>
                    </div>
                    <div class="col-md-12" >
                        <p style="color:black;font-weight:bold;" > @if(isset($qrs) && count($qrs) > 0)
    Total Record Found: {{ count($qrs) }}
@endif</p>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive mb-5" id="">
                        <form action="{{ route('qrcode.multidelete') }}" method="post">
                            @csrf
                            <table class="table table-striped border border-collapse" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th class="wd-20p">
                                            <input type="checkbox" name="checkall" id="checkall">
                                        </th>
                                        <th witdh="10%">ID</th>
                                        <th witdh="10%">Calibration Date</th>
                                        <th witdh="10%">Recalibration Date</th>
                                        <th witdh="10%">ID No.</th>
                                        <th witdh="20%">Action</th>
                                    </tr>
                                </thead>
                                @forelse ($qrs as $key => $qr)
                                <tr>
                                    <td><input type="checkbox" value="{{ $qr->id }}" name="id[]" class="checkbox-item"></td>
                                    <td>{{ $qr->id }}</td>
                                    <td>{{ $qr->calibration_date }}</td>
                                    <td>{{ $qr->recalibration_date }}</td>
                                    <td>{{ $qr->serial_number }}</td>
                                    <td>
                                        <div class="row">
                                            @can('qrcode edit')
                                                <div class="col-md-3">
                                                    <a href="{{ route('qrcode.edit', ['qrcode' => $qr->id]) }}" class="btn btn-primary"><i class="fas fa-edit"></i></a>
                                                </div>
                                            @endcan
                                            @can('qrcode show')

                                            <div class="col-md-3">
                                                <a target="_blank" href="{{ route('qrcode.show', ['qrcode' => $qr->id]) }}" class="btn btn-secondary"><i class="fas fa-print"></i></a>
                                            </div>
                                            @endcan
                                            @can('qrcode create')

                                            <div class="col-md-3">
                                                <a target="_blank" href="{{ route('qrcode.renew', ['qrcode' => $qr->id]) }}" class="btn btn-info"><i class="fas fa-arrow-up"></i></a>
                                            </div>
                                            @endcan

                                            @can('qrcode delete')

                                            <div class="col-md-3">
                                                <a href="{{ route('qrcode.delete', $qr->id) }}" class="btn btn-sm btn-danger">Delete</a>
                                            </div>
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                @endforelse
                            </table>
                            <button type="submit" class="btn btn-danger" id="delete-button">Delete</button>
                        </form>
                     <div class="d-flex justify-content-center">
                     @if(isset($qrs) && $qrs instanceof \Illuminate\Pagination\LengthAwarePaginator && $qrs->count() > 0)
    {{ $qrs->links() }}
@else
@endif
                     </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Handle "Check All" functionality
        $("#checkall").click(function() {
            $('input:checkbox').not(this).prop('checked', this.checked);
            toggleDeleteButton(); // Show/Hide Delete button
        });

        // Handle individual checkbox click
        $('.checkbox-item').click(function() {
            toggleDeleteButton(); // Show/Hide Delete button
        });
    });

    function toggleDeleteButton() {
        if ($('.checkbox-item:checked').length > 0) {
            $('#delete-button').show(); // Show the delete button
        } else {
            $('#delete-button').hide(); // Hide the delete button
        }
    }

    function getExpire() {
        if (document.getElementById('expire').checked) {
            $.ajax({
                type: 'GET',
                url: "{{ route('qrcode.expire') }}",
                data: '_token =