@extends('admin.layouts.app')

@section('content')
@push('styles')
<style>
    div#myTable_filter {
    display: none;
}
#myTable_length{
    margin-right: 15px;
}
</style>
@endpush
        <div class="container-fluid py-4">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb bg-transparent mb-0 pb-0 px-0 me-sm-6 me-5">
                    <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.dashboard') }}">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item text-sm text-dark active font-weight-bolder" aria-current="page">
                        Billing Status</li>
                </ol>
            </nav>
            <div class="row mt-4">
                <div class="col-12">
                    <div class="row justify-content-between">
                        <div class="col-md-4">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card pt-3 mb-4">
                        <div class="card-body px-0 pt-0 pb-2">
                            @if(isset($billing))
                            <form action="{{ route('admin.status.billing.update', $billing->id)}}" method="POST">
                                @csrf
                                @method('PUT')
                            <div class="d-md-flex align-items-start justify-content-center px-3 mb-3">
                                <div class="table-top-left d-flex align-items-start justify-content-between">
                                    <div class="d-md-flex align-items-start justify-content-start">
                                        <div class="d-flex align-items-start justify-content-start"
                                            style="margin-right: 15px;">
                                            <label class="mb-0" style="margin-top: 10px; margin-right: 15px; white-space: nowrap;">Enter
                                                Status</label>
                                                <div>
                                                    <input type="text" class="form-control  @error('status_name') is-invalid @enderror" placeholder="Billing Status"
                                                aria-label="Email" name="status_name" aria-describedby="username-addon" value="{{ @$billing->status_name }}">
                                            @error('status_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong style="margin-top: 10px">{{ $message }}</strong>
                                            </span>
                                            @enderror
                                                </div>
                                            
                                        </div>
                                    </div>

                                </div>
                                <div class="table-top-right">
                                    <button type="submit" class="btn bg-gradient-info mb-0 mr-2">Update</button>
                                    {{-- <a class="btn bg-gradient-info mb-0 ml-2" href="">Save</a> --}}
                                </div>
                            </div>
                            </form>
                            @else
                            <form action="{{ route('admin.status.billing.store') }}" method="POST">
                                @csrf
                            <div class="d-md-flex align-items-start justify-content-center px-3 mb-3">
                                <div class="table-top-left d-flex align-items-start justify-content-between">
                                    <div class="d-md-flex align-items-start justify-content-start">
                                        <div class="d-flex align-items-start justify-content-start"
                                            style="margin-right: 15px;">
                                            <label class="mb-0" style="margin-top: 10px; margin-right: 15px; white-space: nowrap;">Enter
                                                Status Name</label>
                                                <div>
                                                    <input type="text" class="form-control  @error('status_name') is-invalid @enderror" placeholder="Billing Status"
                                                aria-label="Email" name="status_name" aria-describedby="username-addon">
                                            @error('status_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong style="margin-top: 10px">{{ $message }}</strong>
                                            </span>
                                            @enderror
                                                </div>
                                            
                                        </div>
                                    </div>

                                </div>
                                <div class="table-top-right">
                                    <button type="submit" class="btn bg-gradient-info mb-0 mr-2">Save</button>
                                    {{-- <a class="btn bg-gradient-info mb-0 ml-2" href="">Save</a> --}}
                                </div>
                            </div>
                        </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card pt-3 mb-4">
                        <div class="card-body px-0 pt-0 pb-2">
                            <div class="d-md-flex align-items-center justify-content-between px-3 mb-3">
                                <div class="table-top-left d-flex align-items-center justify-content-between">
                                    {{-- <div class="d-flex align-items-center justify-content-between dataTables_length"
                                        style="margin-right: 15px;">
                                        <label class="mb-0" style="margin-right: 10px;">Show</label>
                                        <select class="form-select" name="myTable_length"  aria-controls="myTable" id="" style="width: 100px;">
                                            <option value="10">10</option>
                                            <option value="20">20</option>
                                            <option value="30">30</option>
                                        </select>
                                    </div> --}}
                                </div>
                                <div class="table-top-right">
                                    <div class="input-group">
                                        <span class="input-group-text text-body"><i class="fas fa-search"
                                                aria-hidden="true"></i></span>
                                        <input type="text" class="form-control" id="search_name" placeholder="Search">
                                    </div>
                                </div>
                            </div>
                            @if(session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                            <div class="table-responsive p-0 px-3">
                                <table class="table align-items-center mb-0" id="myTable">
                                    <thead>
                                        <tr>
                                            {{-- <th>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="selectAll">
                                                    <label class="form-check-label" for="selectAll">Select All</label>
                                                </div>
                                            </th> --}}
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                SL.No</th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Title</th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                                Status</th>
                                            <th
                                                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($billings as $billing)
                                        <tr>
                                            {{-- <td>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="checkbox{{ $category->id }}" name="category[]" value="{{ $category->id }}">
                                                    <label class="form-check-label" for="checkbox{{ $category->id }}"></label>
                                                </div>
                                            </td> --}}
                                            <td>
                                                <div class="d-flex px-2 py-1">
                                                    <h6 class="mb-0 text-sm">{{ $loop->iteration }}</h6>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex px-2 py-1">
                                                    <h6 class="mb-0 text-sm">{{ $billing->status_name }}</h6>
                                                </div>
                                            </td>
                                            <td>
                                                <h6 class="mb-0">
                                                    @if ($billing->status == 1)
                                                        <span class="badge bg-success">Active</span>
                                                    @else
                                                        <span class="badge bg-danger">InActive</span>
                                                    @endif
                                                </h6>
                                            </td>
                                            <td>
                                                <ul class="nav table-btn-group" style="flex-wrap: nowrap;">
                                                    <li class="nav-item" style="display: flex;
                                                    align-items: center;">
                                                        <a class="mb-0 mx-2" style="display: inline-block;"
                                                            href="{{ route('admin.status.billing.edit', $billing->id) }}"><i class="fas fa-edit" aria-hidden="true"></i></a>
                                                    </li>
                                                    <li class="nav-item">
                                                        {{-- <a class="btn bg-gradient-info mb-0 mr-2 btn-sm delete-record" data-record-id="{{ $category->id }}" href="#">Delete</a> --}}
                                                      </li>
                                                      <li class="nav-item">
                                                        <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" role="button"
                                                            data-bs-toggle="modal" data-bs-target="#exampleModal{{ $billing->id }}"
                                                            href="#">Change Status</a>
                                                    </li>
                                                    {{-- <li class="nav-item">
                                                        <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" role="button"
                                                            data-bs-toggle="modal" data-bs-target="#exampleModal"
                                                            href="#">Delete</a>
                                                    </li> --}}
                                                </ul>
                                            </td>
                                        </tr>
                                        <div class="modal fade" id="exampleModal{{ $billing->id }}" tabindex="-1" aria-labelledby="exampleModalLabel{{ $billing->id }}" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <form action="{{ route('admin.billing.update.change-status', ['id' => $billing->id]) }}" method="POST">
                                                        @csrf
                                                        <div class="modal-body pb-0">
                                                            <h1 class="modal-title fs-5 mb-3" id="exampleModalLabel{{ $billing->id }}">Do you want to change the status ?</h1>
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio" id="inlineCheckboxYes{{ $billing->id }}" name="status" value="1" @if($billing->status == 1) checked @endif>
                                                                <label class="form-check-label" style="font-weight: 600;" for="inlineCheckboxYes{{ $billing->id }}">Active</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio" id="inlineCheckboxNo{{ $billing->id }}" name="status" value="2" @if($billing->status == 2) checked @endif>
                                                                <label class="form-check-label" style="font-weight: 600;" for="inlineCheckboxNo{{ $billing->id }}">Inactive</label>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer border-0 pt-0">
                                                            <button type="submit" class="btn bg-gradient-info mb-0 mr-2 btn-sm">Confirm</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>        
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body pb-0">
                    <h1 class="modal-title fs-5 mb-3" id="exampleModalLabel">Do you want to Delete ?</h1>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" id="inlineCheckbox1" value="option1" checked>
                        <label class="form-check-label" style="font-weight: 600;" for="inlineCheckbox1">Yes</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" id="inlineCheckbox2" value="option2">
                        <label class="form-check-label" style="font-weight: 600;" for="inlineCheckbox2">No</label>
                    </div>
                    <!-- <p><strong>Register :</strong> <span style="color: #198754;">Staff Data Saved Successfully.</span></p> -->
                </div>
                <div class="modal-footer border-0 pt-0">
                    <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button> -->
                    <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./dashboard.html">Confirm</a>
                </div>
            </div>
        </div>
    </div>



<script src="https://code.jquery.com/jquery-3.7.0.js"></script>

    <!-- Include SweetAlert CSS and JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('js/app.js') }}"></script>

<script>
    
    // Initialize DataTable when the document is ready
    let table = new DataTable('#myTable', {
        responsive: true, 
        pageLength: 20, // Set the number of records per page to 20
    });
    
         // Add an event listener for the search input
         $('#search_name').on('input', function () {
                table.search(this.value).draw(); // Apply the search and redraw the table
            });
    
    
      $(document).ready(function() {
        $('#selectAll').change(function() {
            $('input[name="category[]"]').prop('checked', this.checked);
        });
    
         // Add an event listener for the delete buttons
        //  $('.delete-record').on('click', function (e) {
        //         e.preventDefault();
        //         var recordId = $(this).data('record-id');
        //         var $this = $(this); // Store reference to $(this)

        //         // Show the SweetAlert confirmation dialog
        //         swal({
        //             title: "Are you sure?",
        //             text: "Once deleted, you will not be able to recover this record!",
        //             icon: "warning",
        //             buttons: true,
        //             dangerMode: true,
        //         })
        //         .then((willDelete) => {
        //             if (willDelete) {
        //                 // User confirmed, perform the delete action
        //                 $.ajax({
        //                     type: "POST",
        //                     url: "{{ route('admin.categories.delete') }}", // Replace with your delete route
        //                     data: {
        //                         "_token": "{{ csrf_token() }}",
        //                         "id": recordId
        //                     },
        //                     success: function (response) {
        //                         if (response.success) {
        //                             // Record deleted successfully, you can remove the table row
        //                             swal("The category has been deleted!", {
        //                                 icon: "success",
        //                             });
        //                             // Remove the table row using $this
        //                             $this.closest('tr').remove();
        //                             location.reload();
        //                         } else {
        //                             swal("Oops! Something went wrong.", {
        //                                 icon: "error",
        //                             });
        //                         }
        //                     },
        //                     error: function (xhr, status, error) {
        //                         swal("Oops! Something went wrong.", {
        //                             icon: "error",
        //                         });
        //                     }
        //                 });
        //             }
        //         });
        // });
    });
</script>
@endsection