@include('includes.app')
@include('includes.sidebar')
@include('includes.header')
@include('includes.toster')
<style>
    .filter-transition {
        overflow: hidden;
        transition: all 0.4s ease;
        transform-origin: top;
        max-height: 1000px;
        /* enough height to accommodate content */
        transform: scaleY(1);
        opacity: 1;
    }

    .filter-transition.hidden {
        max-height: 0;
        transform: scaleY(0);
        opacity: 0;
        padding: 0 !important;
        margin: 0 !important;
    }

    .page-content {
        min-height: 100vh;
        padding: calc(70px + 1.5rem) calc(1.5rem * .5) 60px calc(1.5rem * .5);
    }

    /*@media (max-width: 991.98px) {*/
    /*  #sidebarWrapper {*/
    /*    transform: translateX(-100%);*/
    /*    transition: transform 0.3s ease-in-out;*/
    /*    display: block !important;*/
    /*    position: fixed;*/
    /*    top: 70px;*/
    /*    left: 0;*/
    /*    width: 250px;*/
    /*    background: white;*/
    /*    z-index: 1000;*/
    /*    height: 100vh;*/
    /*    overflow-y: auto;*/
    /*    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);*/
    /*  }*/

    /*  #sidebarWrapper.active {*/
    /*    transform: translateX(0);*/
    /*  }*/
    /*}*/
    /*#sidebarWrapper a.active {*/

    /*  font-weight: bold;*/
    /*  background: #e6f4ff;*/
    /*  color: #007bff !important;*/
    /*  border-radius: 5px;*/
    /*  padding: 6px 12px;*/
    /*  display: block;*/


    /*}*/


    .custom-dropdown {
        min-width: 100px;
        padding: 4px 0;
        font-size: 13px;
        text-align: center;
    }

    .custom-dropdown .dropdown-item {
        padding: 4px 8px;
    }

    .offcanvas-body .card {
        background-color: white;
        border: none;
        margin-bottom: 1rem;
    }

    .offcanvas-body .card-header {
        font-weight: bold;
        font-size: 16px;
    }

    .offcanvas-body p {
        margin: 0 0 5px;
        font-size: 14px;
    }
</style>
<div class="page-content">
    <div class="container-fluid media-containerfluid" style="background-color: #F6F7F9; padding-left: 45px;">
        <div class="row mt-4">

            <!-- Sidebar Column -->
            @include('includes.under-master-sidebar')



            <!-- Main Content -->
            <div class="col-md-10">
                <!--              <button class="btn btn-primary d-lg-none m-2" onclick="toggleSidebar()">-->

                <div class="d-flex justify-content-end mb-3">
                    <a class="btn btn-primary" style="background: #05BCF6;" onclick="showEquipment()">
                        + Add Terms & Conditions
                    </a>
                </div>


                <div class="card mb-4 responsive-card">

                    <!-- Filter Form -->
                    <!--<div id="filterForm" class="card-body filter-transition">-->
                    <!--	<form class="row g-3">-->
                    <!--		<div class="col-md-4">-->
                    <!--			<label class="form-label">Terms & Condition Name:</label>-->
                    <!--			<select class="form-select"><option>Select Name</option></select>-->
                    <!--		</div>-->
                    <!--<div class="col-md-4">-->
                    <!--	<label class="form-label">Carrier</label>-->
                    <!--	<select class="form-select"><option>Select Carrier</option></select>-->
                    <!--</div>-->
                    <!--<div class="col-md-4">-->
                    <!--	<label class="form-label">Status</label>-->
                    <!--	<select class="form-select"><option>Select Status</option></select>-->
                    <!--</div>-->
                    <!--<div class="col-md-4">-->
                    <!--	<label class="form-label">Payment Status</label>-->
                    <!--	<select class="form-select"><option>Select Payment</option></select>-->
                    <!--</div>-->
                    <!--<div class="col-md-4">-->
                    <!--	<label class="form-label">Driver</label>-->
                    <!--	<select class="form-select"><option>Select Driver</option></select>-->
                    <!--</div>-->
                    <!--		<div class="col-md-4">-->
                    <!--			<label class="form-label">Date Range</label>-->
                    <!--			<select class="form-select"><option>Last Week</option></select>-->
                    <!--		</div>-->
                    <!--		<div class="col-12 text-end">-->
                    <!--			<button class="btn btn-primary mt-2" style="background-color: #16ACF2; border-color: #16ACF2;">Apply</button>-->

                    <!--			<button class="btn btn-primary mt-2" style="background-color: #E33C5A; border-color: #E33C5A;">Clear</button>-->
                    <!--		</div>-->
                    <!--	</form>-->
                    <!--</div>-->

                    <!--<hr style="border: 1px solid #0D0D0D;">-->

                    <!-- Filter Toggle Section -->
                    <div class="d-flex justify-content-between align-items-center p-2 rounded">
                        <!-- Left Buttons -->
                        <div class="d-flex gap-2">

                        </div>

                        <!-- Center Title -->
                        <div class="text-center">
                            <h6 class="mt-3" style="font-size: 20px; font-weight: 600;">List of Terms & Conditions</h6>
                            <!--<small style="font-size: 16px; font-weight: 500;">From Jun 25, 2025 to Aug 30, 2025</small>-->
                        </div>

                        <!-- Right Filter Button -->
                        <div>
                            <!--<button onclick="toggleFilter()" class="btn btn-light btn-sm border" style="width: 70px; height:30px; background: #DFEAFC; border-color: #DFEAFC;">-->
                            <!--	Filter <i id="chevronIcon" class="bi bi-chevron-up"></i>-->
                            <!--</button>-->
                        </div>
                    </div>

                    <!-- JavaScript -->
                    <script>
                        function toggleFilter() {
                            const filterForm = document.getElementById("filterForm");
                            const icon = document.getElementById("chevronIcon");

                            filterForm.classList.toggle("hidden");

                            // Toggle icon
                            if (filterForm.classList.contains("hidden")) {
                                icon.classList.remove("bi-chevron-up");
                                icon.classList.add("bi-chevron-down");
                            } else {
                                icon.classList.remove("bi-chevron-down");
                                icon.classList.add("bi-chevron-up");
                            }
                        }

                        // On page load, filter should be visible
                        document.addEventListener("DOMContentLoaded", function () {
                            document.getElementById("filterForm").classList.remove("hidden");
                        });
                    </script>



                    <!-- Table Card -->

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="ordersTable" class="table table-bordered"
                                style="background-color: white; color: black;">
                                <thead style="background: #05BCF6; color: white;">
                                    <tr>
                                        <th>Sr. No.</th>
                                        <th>Default/Active</th>
                                        <th>Module</th>
                                        <th>Terms & Conditions Name</th>

                                        <th>Edit</th>
                                        <th>Delete</th>

                                    </tr>
                                </thead>
                                <tbody style="background-color: white; color: black;">
                                    @foreach ($states as $index => $state)
                                        <tr>
                                            <!--<td><input type="checkbox" class="select-row" /></td>-->
                                            <td>{{ $index + 1 }}</td>
                                            <td>
                                                @if ($state->is_active)
                                                    <span class="badge bg-success">Active/Default</span>  
                                                @else
                                                    <span class="badge bg-danger">Not Active/Default</span>                                                  
                                                @endif
                                            </td>
                                            <td>{{ Str::title($state->module ?? '') }}</td>
                                            <td>{{ $state->name }}</td>
                                            <td>
                                                <button class="btn btn-sm btn-success"
                                                    onclick="showStateModal({{ $state->id }})">
                                                    <i class="bi bi-pencil-square me-2"></i>Edit
                                                </button>


                                            </td>
                                            <td>
                                                <!-- Delete Button (Triggers Modal) -->
                                                <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal"
                                                    data-bs-target="#deleteConfirmModal"
                                                    data-url="{{ url('/Terms_Condition/' . $state->id) }}">
                                                    <i class="bi bi-trash me-2"></i> Delete
                                                </button>
                                            </td>

                                        </tr>

                                        <!-- Edit Modal -->
                                        <div class="modal fade" id="editStateModal{{ $state->id }}" tabindex="-1"
                                            aria-labelledby="editStateLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-lg">
                                                <div class="modal-content rounded-4">
                                                    <form method="POST"
                                                        action="{{ url('/Terms_Condition/' . $state->id . '/update') }}">
                                                        @csrf
                                                        <div class="modal-header text-white rounded-top-4"
                                                            style="background-color: #05BCF6;">
                                                            <h5 class="modal-title" id="editStateLabel">Edit Terms &
                                                                Conditions</h5>
                                                            <button type="button" class="btn-close text-white"
                                                                style="filter: invert(1);" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="mb-3">
                                                                <label class="form-label">Terms & Conditions Name<span
                                                                        class="text-danger">*</span></label>
                                                                <input class="form-control" name="name"
                                                                    value="{{ $state->name }}" required>
                                                            </div>

                                                            <div class="mb-3">
                                                                <label class="form-label">Module<span
                                                                        class="text-danger">*</span></label>
                                                                <select class="form-select" name="module">
                                                                    <option value="">Select Module</option>
                                                                    <option value="quotation" {{ $state->module == 'quotation' ? 'selected' : '' }}>Quotation</option>
                                                                    <option value="loadboard" {{ $state->module == 'loadboard' ? 'selected' : '' }}>Load Board</option>
                                                                    <option value="order" {{ $state->module == 'order' ? 'selected' : '' }}>Order</option>
                                                                    <option value="invoice" {{ $state->module == 'invoice' ? 'selected' : '' }}>Invoice</option>
                                                                    <option value="rate_config" {{ $state->module == 'rate_config' ? 'selected' : '' }}>
                                                                        Rate Config</option>
                                                                    <option value="remitance" {{ $state->module == 'remitance' ? 'selected' : '' }}>Remitance</option>
                                                                    <option value="reminder" {{ $state->module == 'reminder' ? 'selected' : '' }}>Reminder</option>
                                                                    <option value="deposite_slip" {{ $state->module == 'deposite_slip' ? 'selected' : '' }}>Deposite Slip</option>
                                                                </select>
                                                            </div>

                                                            <div class="mb-3">
                                                                <label class="form-label">Description:</label>
                                                                <textarea class="form-control" name="description"
                                                                    id="description{{ $state->id }}">{{ $state->description }}</textarea>
                                                            </div>

                                                            <div class="mb-3">
                                                                <div class="form-check">
                                                                    <input class="form-check-input border border-primary border-2 rounded" type="checkbox" value=""
                                                                        name="is_active" id="isActiveAdd" @if ($state->is_active) checked @endif>
                                                                    <label class="form-check-label" for="isActiveAdd">
                                                                        Default/Active
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer justify-content-center">
                                                            <button type="submit" class="btn btn-sm text-white"
                                                                style="background-color: #05BCF6;">Update</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>


                    </div>
                </div>

            </div>
        </div>

        <div class="modal fade" id="addEquipment" tabindex="-1" aria-labelledby="addEquipmentLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content rounded-4">
                    <div class="modal-header text-white rounded-top-4">
                        <h5 class="modal-title" id="addEquipmentLabel">Add Terms & Condition</h5>
                        <button type="button" class="btn-close text-white" style="filter: invert(1);"
                            data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>


                    <form method="POST" action="{{ url('Terms_Condition') }}">
                        @csrf
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">Terms & Conditions Name<span
                                        class="text-danger">*</span></label>
                                <input class="form-control" name="name" placeholder="Enter Terms & Conditions Name"
                                    required>
                            </div>

                            <div class="mb-3">
                                                                <label class="form-label">Module<span
                                                                        class="text-danger">*</span></label>
                                                                <select class="form-select" name="module">
                                                                    <option value="">Select Module</option>
                                                                    <option value="quotation">Quotation</option>
                                                                    <option value="loadboard">Load Board</option>
                                                                    <option value="order">Order</option>
                                                                    <option value="invoice">Invoice</option>
                                                                    <option value="rate_config">
                                                                        Rate Config</option>
                                                                    <option value="remitance">Remitance</option>
                                                                    <option value="reminder">Reminder</option>
                                                                    <option value="deposite_slip">Deposite Slip</option>
                                                                </select>
                                                            </div>

                            <div class="mb-3">
                                <label class="form-label">Description:</label>
                                <textarea class="form-control" name="description" id="description" rows="4"
                                    placeholder="Enter Description"></textarea>
                            </div>

                            <div class="mb-3">
                                                                <div class="form-check">
                                                                    <input class="form-check-input border border-primary border-2 rounded" type="checkbox" value=""
                                                                        name="is_active" id="isActive">
                                                                    <label class="form-check-label" for="isActive">
                                                                        Default/Active
                                                                    </label>
                                                                </div>
                                                            </div>

                        </div>
                        <div class="modal-footer justify-content-center" style="border-top: none;">
                            <button type="submit" class="btn btn-sm text-white"
                                style="background-color: #05BCF6;">Create</button>
                        </div>
                    </form>

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








        <!-- Delete Confirmation Modal -->
        <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel"
            aria-hidden="true" data-bs-backdrop="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-4">
                    <div class="modal-header bg-danger text-white rounded-top-4">
                        <h5 class="modal-title" id="deleteConfirmModalLabel">
                            <i class="bi bi-exclamation-triangle me-2"></i>Confirm Deletion
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <p class="mb-2">Are you sure you want to delete this data?</p>
                        <p class="text-muted small">This action cannot be undone.</p>
                    </div>
                    <div class="modal-footer justify-content-center">

                        <form id="deleteForm" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-danger">Yes, Delete</button>
                        </form>
                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>


        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const deleteModal = document.getElementById('deleteConfirmModal');
                deleteModal.addEventListener('show.bs.modal', function (event) {
                    const button = event.relatedTarget;
                    const url = button.getAttribute('data-url');
                    const form = deleteModal.querySelector('#deleteForm');
                    form.setAttribute('action', url);
                });
            });
        </script>



        <!--<script src="https://cdn.ckeditor.com/4.25.1-lts/standard/ckeditor.js"></script>-->
        <!--<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>-->
        <script src="https://cdn.ckeditor.com/4.22.0/standard/ckeditor.js"></script>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var modal = document.getElementById('addEquipment');


                modal.addEventListener('shown.bs.modal', function () {
                    // Destroy previous instance if exists
                    if (CKEDITOR.instances['description']) {
                        CKEDITOR.instances['description'].destroy(true);
                    }

                    // Re-initialize CKEditor
                    CKEDITOR.replace('description');
                });
            });
        </script>


        <style>
            .cke_notification_warning {
                display: none !important;
            }
        </style>


        <!-- Footer -->

    </div>
</div>
@include('includes.footer')
<!-- Scripts -->
<!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script> -->
<!-- jQuery -->


</div>
</div>

<script>
    function addPickup() {
        const id = 'pickup-' + Date.now();
        const html = `
      <div class="row g-3 pickup-block position-relative mt-3" id="${id}">
        <span class="remove-block" onclick="document.getElementById('${id}').remove()">×</span>
        <div class="col-md-6">
          <label class="form-label">Product Name:</label>
          <input class="form-control" value="Add">
        </div>
        <div class="col-md-6">
          <label class="form-label">Quantity:</label>
          <input class="form-control" value="Add">
        </div>
      </div>`;
        document.getElementById('pickupSection').insertAdjacentHTML('beforeend', html);
    }
</script>


<script>
    function showEquipment() {
        const modal = new bootstrap.Modal(document.getElementById('addEquipment'));
        modal.show();
    }


    function showStateModal(id) {
        const modalElement = document.getElementById('editStateModal' + id);
        const modal = new bootstrap.Modal(modalElement);

        // Wait until modal is fully shown, then initialize CKEditor
        modalElement.addEventListener('shown.bs.modal', function () {
            const textareaId = 'description' + id;

            // Destroy previous instance if exists
            if (CKEDITOR.instances[textareaId]) {
                CKEDITOR.instances[textareaId].destroy(true);
            }

            // Initialize CKEditor for this specific textarea
            CKEDITOR.replace(textareaId);
        }, { once: true }); // 'once' ensures the listener is added only once per modal open

        modal.show();
    }



</script>

<script>
    document.getElementById('select-all').addEventListener('change', function () {
        const isChecked = this.checked;
        document.querySelectorAll('.select-row').forEach(cb => {
            cb.checked = isChecked;
        });
    });
</script>
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
<script src="../assets/js/sidebarmenu.js"></script>
<script src="../assets/js/app.min.js"></script>
<script src="../assets/libs/apexcharts/dist/apexcharts.min.js"></script>
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
<script src="../assets/js/dashboard.js"></script>
<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 () {
        $('#ordersTable').DataTable({
            responsive: true
        });
    });
</script>
<script>
    function toggleSidebar() {
        const sidebar = document.getElementById("sidebarWrapper");
        sidebar.classList.toggle("active");
    }
</script>
</body>

</html>