@extends('Admin.layout')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        {{-- Page Header --}}
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">

            <div>
                <h4 class="fw-bold mb-1">
                    Gold Rates
                </h4>

            </div>

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

                <i class="bi bi-plus-lg me-1"></i>

                Add Rate

            </a>

        </div>

        {{-- Table Card --}}
        <div class="card">


            <div class="card-body">

                <div class="table-responsive">

                    <table id="goldRateTable" class="table table-bordered table-hover" style="width:100%">

                        <thead>
                            <tr>

                                <th>S.No</th>

                                <th>Date</th>

                                <th>Rate Type</th>

                                <th>Rate</th>

                                <th>Unit</th>

                                <th>Rate Date</th>

                                <th>Status</th>

                                <th>Actions</th>

                            </tr>
                        </thead>

                    </table>

                </div>

            </div>

        </div>

    </div>

    {{-- STATUS MODAL --}}
    <div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content">

                <form action="{{ route('change_status') }}" id="SubmitForm" method="POST">

                    @csrf

                    <div class="modal-header">

                        <h5 class="modal-title" id="statusModalLabel">
                            Change Status
                        </h5>

                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>

                    </div>


                    <div class="modal-body">

                        {{-- Hidden ID --}}
                        <input type="hidden" name="id" id="status_rate_id">


                        {{-- Hidden Status --}}
                        <input type="hidden" name="status" id="status_value">


                        <p class="mb-0">

                            Are you sure you want to change the status of

                            <strong id="status_rate_name">
                                this rate
                            </strong>

                            ?

                        </p>

                    </div>


                    <div class="modal-footer">

                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>


                        <button type="submit" id="submit_btn" class="btn btn-primary">
                            Yes, Change Status
                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

    {{-- DELETE GOLD RATE 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">

                <h5 class="fw-bold mb-2">
                    Delete Gold Rate
                </h5>

                <p class="text-muted">
                    Are you sure you want to delete
                    <strong id="delete_rate_name">this rate</strong>?
                </p>

                <form action="{{ route('delete_rate') }}" method="POST" id="DeleteRateForm">

                    @csrf

                    {{-- Hidden Rate ID --}}
                    <input type="hidden" name="id" id="delete_rate_id">

                    <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 fw-semibold" id="confirmDeleteRateBtn">

                            Yes, Delete

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>
@endsection


@section('scripts')
    <script>
        $(document).ready(function() {

            $('#goldRateTable').DataTable({

                processing: true,

                serverSide: true,

                ajax: "{{ route('gold_rate_data') }}",
                language: {
                    lengthMenu: '_MENU_'
                },
                columnDefs: [

                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }

                ],

                columns: [

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

                    {
                        data: 'created_at',
                        name: 'created_at'
                    },

                    {
                        data: 'type',
                        name: 'type'
                    },

                    {
                        data: 'rate',
                        name: 'rate'
                    },

                    {
                        data: 'unit',
                        name: 'unit'
                    },

                    {
                        data: 'rate_date',
                        name: 'rate_date'
                    },

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

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

                ],

                order: [
                    [0, 'desc']
                ]

            });

            // Status Modal

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

                // Prevent checkbox from changing visually
                e.preventDefault();

                let button = $(this);

                let id = button.data('id');

                let status = Number(button.data('status'));

                let name = button.data('name');

                // Set ID
                $('#status_rate_id').val(id);

                // Set opposite status
                $('#status_value').val(
                    status === 1 ? 0 : 1
                );

                // Set rate name
                $('#status_rate_name').text(
                    name.toUpperCase()
                );

                // Show modal
                let modal = bootstrap.Modal.getOrCreateInstance(
                    document.getElementById('statusModal')
                );

                modal.show();

            });

            //    Delete Modal

            $('#deleteModal').on('show.bs.modal', function(event) {

                let button = $(event.relatedTarget);

                let id = button.data('id');

                let name = button.data('name');


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

                $('#delete_rate_name').text(
                    name.toUpperCase()
                );

            });

        });
        document.getElementById('submit_btn').addEventListener('click', function(e) {
            e.preventDefault(); // ✅ prevent double submit
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('SubmitForm').submit();
        });
    </script>
@endsection