@extends('Admin.layout')

@section('content')

    <style>
        /* =========================================================
                                                       POLICY CARD
                                                    ========================================================= */

        .policy-card {
            background: #19212c !important;
            border: 1px solid rgba(218, 184, 91, 0.35) !important;
            border-radius: 18px !important;
        }


        /* =========================================================
                                                       TABLE WRAPPER
                                                    ========================================================= */

        .policy-table-wrapper {
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
        }


        /* =========================================================
                                                       TABLE
                                                    ========================================================= */

        #policyTable {
            width: 100% !important;
            table-layout: fixed !important;
            margin: 0 !important;
            background: transparent;
            border-collapse: collapse !important;
        }


        /* =========================================================
                                                       COLUMN WIDTHS
                                                    ========================================================= */

        #policyTable th:nth-child(1),
        #policyTable td:nth-child(1) {
            width: 7% !important;
        }

        #policyTable th:nth-child(2),
        #policyTable td:nth-child(2) {
            width: 20% !important;
        }

        #policyTable th:nth-child(3),
        #policyTable td:nth-child(3) {
            width: 14% !important;
        }

        #policyTable th:nth-child(4),
        #policyTable td:nth-child(4) {
            width: 12% !important;
        }

        #policyTable th:nth-child(5),
        #policyTable td:nth-child(5) {
            width: 32% !important;
        }

        #policyTable th:nth-child(6),
        #policyTable td:nth-child(6) {
            width: 15% !important;
        }


        /* =========================================================
                                                       TABLE HEADER
                                                    ========================================================= */

        #policyTable thead th {
            background: #252b31 !important;
            color: #f0d37b !important;
            font-size: 15px;
            font-weight: 700;
            padding: 16px 12px !important;
            border-bottom: 1px solid #62583b !important;
            border-top: none !important;
            white-space: nowrap;
            vertical-align: middle;
        }


        /* =========================================================
                                                       TABLE BODY
                                                    ========================================================= */

        #policyTable tbody td {
            background: #19212c !important;
            color: #e8eaf0 !important;
            font-size: 15px;
            padding: 16px 12px !important;
            border-bottom: 1px solid #3d4245 !important;
            border-top: none !important;
            vertical-align: middle;
        }


        /* =========================================================
                                                       NORMAL COLUMNS
                                                    ========================================================= */

        #policyTable td:nth-child(1),
        #policyTable td:nth-child(2),
        #policyTable td:nth-child(3),
        #policyTable td:nth-child(4),
        #policyTable td:nth-child(6) {
            white-space: nowrap !important;
        }


        /* =========================================================
                                                       DESCRIPTION
                                                    ========================================================= */

        #policyTable td:nth-child(5) {
            white-space: normal !important;
            word-break: normal !important;
            overflow-wrap: anywhere !important;
            line-height: 1.5;
            max-width: 0;
        }


        /* =========================================================
                                                       HOVER
                                                    ========================================================= */

        #policyTable tbody tr:hover td {
            background: #202a36 !important;
        }


        /* =========================================================
                                                       STATUS
                                                    ========================================================= */

        #policyTable .status-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 75px;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }


        /* ACTIVE */

        #policyTable .active-status {
            color: #42d392 !important;
            background: rgba(66, 211, 146, 0.12) !important;
            border: 1px solid rgba(66, 211, 146, 0.30);
        }

        #policyTable .active-status:hover {
            background: rgba(66, 211, 146, 0.20) !important;
            border-color: rgba(66, 211, 146, 0.50);
        }


        /* INACTIVE */

        #policyTable .inactive-status {
            color: #ff7077 !important;
            background: rgba(255, 112, 119, 0.12) !important;
            border: 1px solid rgba(255, 112, 119, 0.30);
        }

        #policyTable .inactive-status:hover {
            background: rgba(255, 112, 119, 0.20) !important;
            border-color: rgba(255, 112, 119, 0.50);
        }


        /* =========================================================
                                                       ACTION
                                                    ========================================================= */

        #policyTable .action-buttons {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            white-space: nowrap;
        }

        #policyTable .action-btn {
            width: 34px;
            height: 34px;
            padding: 0 !important;
            border: none !important;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        #policyTable .action-btn i {
            display: inline-block !important;
            font-size: 16px;
        }


        /* EDIT */

        #policyTable .edit-btn {
            background: #f0cc68 !important;
            color: #19212c !important;
        }


        /* DELETE */

        #policyTable .delete-btn {
            background: #ff7077 !important;
            color: #ffffff !important;
        }


        a {
            text-decoration: none;
        }


        /* =========================================================
                                                       DATATABLES
                                                    ========================================================= */

        .dataTables_wrapper .dataTables_info {
            color: #b8bec8 !important;
            font-size: 13px;
            padding-top: 15px;
        }

        .dataTables_wrapper .dataTables_paginate {
            padding-top: 12px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            color: #e8eaf0 !important;
            border: 1px solid transparent !important;
            background: transparent !important;
            border-radius: 6px !important;
            margin-left: 3px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #252b31 !important;
            border-color: #62583b !important;
            color: #f0d37b !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #f0cc68 !important;
            border-color: #f0cc68 !important;
            color: #19212c !important;
            font-weight: 600;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            color: #666d77 !important;
        }


        /* =========================================================
                                                       MOBILE
                                                    ========================================================= */

        @media (max-width: 768px) {

            .policy-card {
                border-radius: 12px !important;
                padding: 1rem !important;
            }

            #policyTable {
                min-width: 850px !important;
                table-layout: fixed !important;
            }

            #policyTable th:nth-child(1),
            #policyTable td:nth-child(1) {
                width: 70px !important;
                min-width: 70px !important;
            }

            #policyTable th:nth-child(2),
            #policyTable td:nth-child(2) {
                width: 160px !important;
                min-width: 160px !important;
            }

            #policyTable th:nth-child(3),
            #policyTable td:nth-child(3) {
                width: 120px !important;
                min-width: 120px !important;
            }

            #policyTable th:nth-child(4),
            #policyTable td:nth-child(4) {
                width: 110px !important;
                min-width: 110px !important;
            }

            #policyTable th:nth-child(5),
            #policyTable td:nth-child(5) {
                width: 220px !important;
                min-width: 220px !important;
                max-width: 220px !important;
            }

            #policyTable td:nth-child(5) {
                white-space: normal !important;
                overflow-wrap: anywhere !important;
                line-height: 1.45;
            }

            #policyTable th:nth-child(6),
            #policyTable td:nth-child(6) {
                width: 130px !important;
                min-width: 130px !important;
            }

            #policyTable thead th {
                font-size: 13px;
                padding: 13px 10px !important;
            }

            #policyTable tbody td {
                font-size: 13px;
                padding: 13px 10px !important;
            }

            .policy-table-wrapper {
                overflow-x: auto;
            }

            .dataTables_wrapper .dataTables_info {
                font-size: 12px;
            }
        }
    </style>


    <!-- =========================================================
                                                         PAGE HEADER
                                                    ========================================================= -->

    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center mb-3">

        <div class="w-100">

            <h3 class="mb-0">
                Interest Policies
            </h3>

        </div>

        <div class="w-100 mt-2 mt-lg-0 text-start text-lg-end">

            <a href="{{ route('add_policy') }}" class="btn btn-primary text-white">

                <i class="ti ti-plus me-1"></i>

                Add Policy

            </a>

        </div>

    </div>


    <!-- =========================================================
                                                         MAIN CARD
                                                    ========================================================= -->

    <div class="card policy-card p-4 p-md-5">

        <!-- FILTER -->

        <div
            class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center gap-3 mb-4">

            <div>

                <select id="pageLength" class="form-select">

                    <option value="10">10</option>

                    <option value="25">25</option>

                    <option value="50">50</option>

                </select>

            </div>

            <div>

                <input type="search" id="policySearch" class="form-control" placeholder="Search">

            </div>

        </div>


        <!-- TABLE -->

        <div class="policy-table-wrapper">

            <table id="policyTable" class="table mb-0" style="width:100%;">

                <thead>

                    <tr>

                        <th>SNO</th>

                        <th>POLICY NAME</th>

                        <th>INTEREST RATE</th>

                        <th>STATUS</th>

                        <th>DESCRIPTION</th>

                        <th>ACTION</th>

                    </tr>

                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>
    <div class="modal fade" id="deletePolicyModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form action="{{ route('delete_policy') }}" method="POST" class="modal-content">
                @csrf
                <input type="hidden" name="id" id="deletePolicyId">

                <div class="modal-header">
                    <h5 class="modal-title">Delete Policy</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    Are you sure you want to delete this policy?
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger" id="deletePolicyBtn">Yes, Sure</button>
                </div>
            </form>
        </div>
    </div>

    <!-- UPDATE STATUS MODAL -->
    <div class="modal fade" id="update" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        Update Status
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to change the status?
                    <input type="hidden" name="is_active" id="updateStatusValue">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-danger" id="updateStatusSubmit">
                        Yes, Sure
                    </button>
                </div>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <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 () {

            /* =========================================================
               DATATABLE
            ========================================================= */

            window.policyTable = $('#policyTable').DataTable({

                processing: true,

                serverSide: true,

                pageLength: 10,

                lengthChange: false,

                searching: true,

                ordering: true,

                info: true,

                autoWidth: false,

                dom: 'rtip',

                ajax: {
                    url: "{{ route('policy_data') }}",
                    type: "GET"
                },

                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'policy_name',
                        name: 'policy_name'
                    },

                    {
                        data: 'interest',
                        name: 'interest'
                    },

                    {
                        data: 'status',
                        name: 'is_active',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'description',
                        name: 'description',

                        render: function (data) {

                            return '<div class="policy-description">' +
                                (data ?? '-') +
                                '</div>';

                        }

                    },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }

                ]

            });


            /* =========================================================
               SEARCH
            ========================================================= */

            $('#policySearch').on('keyup', function () {

                window.policyTable
                    .search(this.value)
                    .draw();

            });


            /* =========================================================
               PAGE LENGTH
            ========================================================= */

            $('#pageLength').on('change', function () {

                window.policyTable
                    .page
                    .len(parseInt(this.value))
                    .draw();

            });

        });

    </script>
    <script>
        $(document).on('click', '.delete-btn', function () {
            $('#deletePolicyId').val($(this).data('id'));
            bootstrap.Modal.getOrCreateInstance(
                document.getElementById('deletePolicyModal')
            ).show();
        });

        $(document).on('submit', '#deletePolicyModal form', function () {

            const button = $('#deletePolicyBtn');

            button.prop('disabled', true);

            button.html(`
                            <span class="spinner-border spinner-border-sm me-1"
                                  role="status"
                                  aria-hidden="true"></span>
                            Processing...
                        `);

        });
    </script>
    <script>

        let statusPolicyId = null;

        /* =========================================================
           OPEN UPDATE STATUS MODAL
        ========================================================= */

        $(document).on('click', '.status-badge', function () {

            statusPolicyId = $(this).data('policy-id');

            const currentStatus = $(this).data('status');

            $('#updateStatusValue').val(
                currentStatus == 1 ? 0 : 1
            );

            const modalEl = document.getElementById('update');

            bootstrap.Modal.getOrCreateInstance(modalEl).show();

        });


        /* =========================================================
           UPDATE STATUS
        ========================================================= */

        $(document).on('click', '#updateStatusSubmit', function () {

            if (!statusPolicyId) {
                return;
            }

            const btn = $(this);

            btn.prop('disabled', true);

            btn.html(`
                <span class="spinner-border spinner-border-sm me-1"
                      role="status"
                      aria-hidden="true"></span>
                Processing...
            `);


            $.ajax({

                url: "{{ route('update_policy_status') }}",

                type: "POST",

                data: {

                    _token: "{{ csrf_token() }}",

                    id: statusPolicyId,

                    is_active: $('#updateStatusValue').val()

                },

                success: function (response) {

                    const modalEl = document.getElementById('update');

                    bootstrap.Modal
                        .getOrCreateInstance(modalEl)
                        .hide();

                    window.policyTable.ajax.reload(null, false);

                },

                error: function (xhr) {

                    let message = 'Something went wrong. Please try again.';

                    if (xhr.responseJSON && xhr.responseJSON.message) {

                        message = xhr.responseJSON.message;

                    }

                    alert(message);

                },

                complete: function () {

                    btn.prop('disabled', false);

                    btn.html('Yes, Sure');

                    statusPolicyId = null;

                }

            });

        });

    </script>
@endsection