@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>Pricing</h5>
        </div>
        <div class="col-auto">
            <a href="{{ route('add_pricing') }}"><button class="btn btn-primary">Add Price</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-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="pricingTable">
                            <thead>
                                <tr>
                                    <th>S.No</th>
                                    <th>Pricing ID</th>
                                    <th>Pricing Type</th>
                                    <th>From Time</th>
                                    <th>To Time</th>
                                    <th>Price</th>
                                    <th>Status</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Delete Modal --}}
        <div class="modal fade" id="deleteModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-sm modal-dialog-centered">
                <div class="modal-content rounded-4 text-center p-4 py-5">
                    <form action="{{ route('price_delete') }}" method="POST" id="deleteForm">
                        @csrf
                        <input type="hidden" name="id" id="delete_pricing_id">

                        <h5 class="fw-bold mb-2">Delete Pricing</h5>
                        <p class="text-muted">Are you sure you want to delete this pricing?</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-danger p-3 ms-2 fw-semibold" id="confirmDelete">Yes,
                                Delete</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Status Modal --}}
        <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('price_change_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_pricing_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>
        {{-- Edit Pricing 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 Pricing</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <form action="{{ route('price_update') }}" method="POST" id="editForm">
                        @csrf
                        <input type="hidden" name="id" id="edit_pricing_id" value="{{ old('id') }}">

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

                                <div class="col-lg-12 mb-3">
                                    <label class="form-label">Pricing Type</label>
                                    <select class="form-select @error('pricing_type') is-invalid @enderror"
                                        name="pricing_type" id="edit_pricing_type">
                                        <option value="">-- Select Pricing Type --</option>
                                        <option value="Day" {{ old('pricing_type') == 'Day' ? 'selected' : '' }}>Day (6:00 AM
                                            - 6:00 PM)</option>
                                        <option value="Night" {{ old('pricing_type') == 'Night' ? 'selected' : '' }}>Night
                                            (6:00 PM - 6:00 AM)</option>
                                    </select>
                                    @error('pricing_type')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="col-lg-12 mb-3">
                                    <label class="form-label">Price per Hour (₹)</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>
                        </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>

        <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 = $('#pricingTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('price_data') }}",
                    },
                    columns: [
                        { data: 'DT_RowIndex', orderable: false, searchable: false },
                        { data: 'pricing_id' },
                        { data: 'pricing_type' },
                        { data: 'from_time', orderable: false, searchable: false },
                        { data: 'to_time', orderable: false, searchable: false },
                        { data: 'price', orderable: false, searchable: false },
                        { data: 'is_active', 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>',
                });

                $('#customSearch').on('keyup', function () {
                    table.search(this.value).draw();
                });

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

            document.getElementById('confirmDelete').addEventListener('click', function () {
                let btn = this;
                btn.disabled = true;
                btn.innerText = 'Processing...';
                document.getElementById('deleteForm').submit();
            });
        </script>
        <script>
            $(document).on('click', '.statusBtn', function () {
                let id = $(this).data('id');
                let status = $(this).data('status');

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

                if (status == 1) {
                    $('#statusMessage').text('Are you sure you want to deactivate this pricing?');
                } else {
                    $('#statusMessage').text('Are you sure you want to activate this pricing?');
                }
            });

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

        <script>
            $(document).on('click', '.editBtn', function () {
                let id = $(this).data('id');
                let type = $(this).data('type');
                let price = $(this).data('price');

                $('#edit_pricing_id').val(id);
                $('#edit_pricing_type').val(type);
                $('#edit_price').val(price);
            });

            document.getElementById('editSubmitBtn').addEventListener('click', function () {
                this.disabled = true;
                this.innerText = 'Processing...';
                document.getElementById('editForm').submit();
            });
        </script>

        @if(session('open_edit_modal') || $errors->any())
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    var editModal = new bootstrap.Modal(document.getElementById('editModal'));
                    editModal.show();
                });
            </script>
        @endif

@endsection