@extends('Admin.layout')
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5>Packages</h5>
        </div>
        <div class="col-auto">
            <a href="{{ route('add_package') }}"><button class="btn btn-primary">Add package</button> </a>
        </div>
    </div>
    <div class="card p-0 m-2">
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-1">
                <select id="pageLength" class="form-select">
                    <option value="10"> 10</option>
                    <option value="25"> 25</option>
                    <option value="50"> 50</option>
                    <option value="100"> 100</option>
                </select>
            </div>
            <div class="col-lg-2 col-md-3">
                <select id="filterPackage" class="form-select">
                    <option value="">All Packages</option>
                    @foreach($packages as $package)
                        <option value="{{ $package->id }}">{{ $package->package_name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 ms-auto">
                <input type="text" id="customSearch" class="form-control" placeholder="Search">
            </div>
        </div>
        <div class="table-responsive pt-0 pb-2">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <table class="table" id="packagesTable">
                            <thead>
                                <tr>
                                    <th>Sno</th>
                                    <th>Package Name</th>
                                    <th>Duration</th>
                                    <th>Price (₹)</th>
                                    {{-- <th>Description</th> --}}
                                    <th>Status</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
        {{-- Edit Package Modal --}}
        <div class="modal fade" id="editModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 p-4">

            <div class="modal-header border-0 pb-0">
                <h5 class="fw-bold mb-0">Edit Package</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <form action="{{ route('package_update') }}" method="POST" id="editForm">
                @csrf
                {{-- Keep id in old() so it persists after redirect --}}
                <input type="hidden" name="id" id="edit_package_id"
                    value="{{ old('id') }}">

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

                        <div class="col-lg-12 mb-3">
                            <label class="form-label">Package Name</label>
                            <input type="text"
                                class="form-control @error('package_name') is-invalid @enderror"
                                name="package_name" id="edit_package_name"
                                value="{{ old('package_name') }}"
                                placeholder="Enter Package Name">
                            @error('package_name')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-lg-12 mb-3">
                            <label class="form-label">Duration</label>
                            <select class="form-select @error('duration_months') is-invalid @enderror"
                                name="duration_months" id="edit_duration_months">
                                <option value="">Select Duration</option>
                                <option value="1"  {{ old('duration_months') == '1'  ? 'selected' : '' }}>1 Month</option>
                                <option value="3"  {{ old('duration_months') == '3'  ? 'selected' : '' }}>3 Months</option>
                                <option value="6"  {{ old('duration_months') == '6'  ? 'selected' : '' }}>6 Months</option>
                                <option value="12" {{ old('duration_months') == '12' ? 'selected' : '' }}>12 Months</option>
                            </select>
                            @error('duration_months')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-lg-12 mb-3">
                            <label class="form-label">Price (₹)</label>
                            <input type="number" step="0.01" min="0"
                                class="form-control @error('price') is-invalid @enderror"
                                name="price" id="edit_price"
                                value="{{ old('price') }}"
                                placeholder="Enter Price">
                            @error('price')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-lg-12 mb-3">
                            <label class="form-label">Description <small class="text-muted">(Optional)</small></label>
                            <textarea rows="2"
                                class="form-control @error('description') is-invalid @enderror"
                                name="description" id="edit_description"
                                placeholder="Enter Description">{{ old('description') }}</textarea>
                            @error('description')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                    </div>
                </div>

                <div class="modal-footer border-0 pt-0 justify-content-center gap-3">
                    <button type="button" class="btn btn-outline-secondary px-4"
                        data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary px-4"
                        id="editSubmitBtn">Update</button>
                </div>

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

        <div class="modal fade" id="statusModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

            <div class="modal-dialog modal-sm modal-dialog-centered">
                <form action="{{ route('package_status') }}" method="POST" id="statusForm">
                    @csrf
                    <div class="modal-content rounded-4 text-center p-4 py-5">
                        <h5 class="fw-bold mb-2">Change Status</h5>
                        <input type="hidden" name="id" id="status_package_id">

                        <p class="text-muted" id="statusMessage">
                            Are you sure you want to change status?
                        </p>

                        <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                            <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                                Cancel
                            </button>

                            <button type="submit" class="btn btn-success p-3 ms-2 fw-semibold" id="confirmStatus">
                                Yes, Change
                            </button>

                        </div>

                    </div>
                </form>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
        <script>
            $(document).ready(function () {
                const table = $('#packagesTable').DataTable({
                    processing: true,
                    serverSide: true,
                   ajax: {
                        url: "{{ route('package_data') }}",
                        data: function (d) {
                            d.package_id = $('#filterPackage').val();
                            
                        }
                    },
                    columns: [
                        { data: 'DT_RowIndex', orderable: false, searchable: false },
                        { data: 'package_name' },
                        { data: 'duration', orderable: false, searchable: false },
                        { data: 'price' },

                        { data: 'status', orderable: false, searchable: false },
                        { data: 'action', orderable: false, searchable: false , className: 'text-center'},
                    ],
                    dom: 'rt<"d-flex justify-content-between align-items-center p-3"ip>',
                });
                 $('#filterPackage').on('change', function () {
                    table.draw();
                })
                // search
                $('#customSearch').on('keyup', function () {
                    table.search(this.value).draw();
                });
                // $('#customSearch').on('keyup', function () { table.search(this.value).draw(); });

                // length
                $('#pageLength').on('change', function () {
                    table.page.len(this.value).draw();
                });
                $(document).on('click', '.deleteBtn', function () {
                    let id = $(this).data('id');
                    $('#delete_id').val(id);
                });




            });
        </script>
        <script>
          

            $(document).on('click', '.editBtn', function () {
                let id = $(this).data('id');
                let name = $(this).data('name');
                let duration = $(this).data('duration');
                let price = $(this).data('price');
                let description = $(this).data('description');

              
                $('#edit_package_id').val(id);
                $('#edit_package_name').val(name);
                $('#edit_duration_months').val(duration);
                $('#edit_price').val(price);
                $('#edit_description').val(description);

              
                $('#err_package_name').addClass('d-none').text('');
                $('#err_duration_months').addClass('d-none').text('');
                $('#err_price').addClass('d-none').text('');
            });

            
            document.getElementById('editSubmitBtn').addEventListener('click', function () {
                this.disabled = true;
                this.innerText = 'Processing...';
                document.getElementById('editForm').submit();
            });
        </script>
      
        <script>
            document.getElementById('confirmStatus').addEventListener('click', function () {
                let btn = this;
                btn.disabled = true;
                btn.innerText = 'Processing...';
                document.getElementById('statusForm').submit();
            });
        </script>
        <script>
            $(document).on('click', '.statusBtn', function () {

                let id = $(this).data('id');
                let status = $(this).data('status');

                $('#status_package_id').val(id);

                if (status == 1) {
                    $('#statusMessage').text(
                        'Are you sure you want to deactivate this user?'
                    );
                } else {
                    $('#statusMessage').text(
                        'Are you sure you want to activate this user?'
                    );
                }
            });
        </script>
   
  @if(session('open_edit_modal'))
 <script>
    
    document.addEventListener('DOMContentLoaded', function () {
        var editModal = new bootstrap.Modal(document.getElementById('editModal'));
        editModal.show();
    });
 </script>
  @endif
 @endsection