@extends('Branch.layout')
@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <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 class="fw-bold">
                <button type="button" class="btn btn-icon bg-white me-2">
                    <a href="{{ route('branch.branch') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Billing Counter Logins — {{ $branch->branch_name }}
            </h5>
        </div>
        <div class="col-auto">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addLoginPage">
                Add Login
            </button>
        </div>
    </div>

    <div class="card p-0 m-2 border-0 shadow-sm">
        <div class="table-responsive p-0">
            <table class="table table-hover mb-0" id="counterTable">
                <thead class="bg-light">
                    <tr>
                        <th class="small fw-bold">Sno</th>
                        <th class="small fw-bold text-center">Date</th>
                        <th class="small fw-bold text-center">Type</th>

                        <th class="small fw-bold text-center">Counter Name</th>
                        <th class="small fw-bold text-center">Login ID</th>
                        <th class="small fw-bold text-center">Password</th>

                        <th class="small fw-bold text-center">Status</th>
                        <th class="small fw-bold text-end px-4">Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    {{-- Add Login Modal --}}
    <div class="modal fade" id="addLoginPage" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('branch.add_billing_counter_form') }}" method="POST">
                    @csrf
                    <input type="hidden" name="branch_id" value="{{ $branch->id }}">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Billing Counter Login</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-2">
                            <label class="form-label">Type <span class="text-danger">*</span></label>
                            <select class="form-select @error('type', 'addCounter') is-invalid @enderror" name="type">
                                <option value="">Select Type</option>
                                <option value="billing" {{ old('type') == 'billing' ? 'selected' : '' }}>Billing</option>
                                <option value="kitchen" {{ old('type') == 'kitchen' ? 'selected' : '' }}>Kitchen
                                </option>
                            </select>
                            @error('type', 'addCounter')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Counter Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="counter_name" placeholder="e.g. Counter 1"
                                required>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Login ID <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="login_id" placeholder="Enter Login ID"
                                required>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Password <span class="text-danger">*</span></label>
                            <input type="password" class="form-control" name="password" placeholder="Enter Password"
                                required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">Save Login</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Edit Login Modal --}}
    <div class="modal fade" id="editLoginModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('branch.edit_billing_counter_form') }}" method="POST">
                    @csrf
                    <input type="hidden" name="id" id="edit_counter_id">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Billing Counter Login</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-2">
                            <label class="form-label">Type <span class="text-danger">*</span></label>
                            <select class="form-select" name="type" id="edit_type">
                                <option value="billing">Billing</option>
                                <option value="kitchen">Kitchen</option>
                            </select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Counter Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="counter_name" id="edit_counter_name"
                                required>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Login ID <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="login_id" id="edit_login_id" required>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Password <small class="text-muted">(leave blank to keep
                                    unchanged)</small></label>
                            <input type="password" class="form-control" name="password" placeholder="New Password">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Delete Modal --}}
    <div class="modal fade" id="deleteCounter" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('branch.delete_billing_counter') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Delete Login</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 billing counter login?
                        <input type="hidden" name="id" id="delete_counter_id">
                    </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">Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Status Change 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">
            <div class="modal-content rounded-4 text-center p-4 py-5">

                <h5 class="fw-bold mb-2">Change Status</h5>

                <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="button" class="btn btn-success p-3 ms-2 fw-semibold" id="confirmStatusChange">
                        Yes, Change
                    </button>

                </div>

            </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 = $('#counterTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('branch.billing_counter_data', $branch->id) }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'date',
                        name: 'created_at',
                        className: 'text-center'
                    },
                    {
                        data: 'type',
                        name: 'type',
                        className: 'text-center'
                    },
                    {
                        data: 'counter_name',
                        name: 'counter_name',
                        className: 'text-center'
                    },
                    {
                        data: 'login_id',
                        name: 'login_id',
                        className: 'text-center'
                    },
                    {
                        data: 'password',
                        name: 'password_hint',
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    },
                    {
                        data: 'status',
                        name: 'is_active',
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                        className: 'text-end px-4'
                    }
                ],
                dom: 'rt<"d-flex justify-content-between align-items-center p-3"ip>',
            });

            // Edit modal fill
            $(document).on('click', '.editCounterBtn', function() {
                $('#edit_counter_id').val($(this).data('id'));
                $('#edit_counter_name').val($(this).data('name'));
                $('#edit_login_id').val($(this).data('login'));
                $('#edit_type').val($(this).data('type'));

                $('#editLoginModal').modal('show');
            });

            // Delete modal fill
            $(document).on('click', '.deleteCounterBtn', function() {
                $('#delete_counter_id').val($(this).data('id'));
            });

            // Status toggle - store target id/status when modal opens
            let statusTargetId = null;
            let statusTargetValue = null;

            $(document).on('click', '.statusToggleBtn', function() {
                statusTargetId = $(this).data('id');
                statusTargetValue = $(this).data('status');

                let message = statusTargetValue == 1 ?
                    'Are you sure you want to activate this login?' :
                    'Are you sure you want to deactivate this login?';

                $('#statusMessage').text(message);
            });

            // Confirm status change
            $('#confirmStatusChange').on('click', function() {

                let btn = $(this);
                btn.prop('disabled', true).text('Updating...');

                $.ajax({
                    url: "{{ route('branch.billing_counter_status') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        id: statusTargetId,
                        status: statusTargetValue
                    },
                    success: function() {
                        $('#statusModal').modal('hide');
                        table.ajax.reload(null, false);
                    },
                    complete: function() {
                        btn.prop('disabled', false).text('Yes, Change');
                    }
                });
            });
        });
    </script>
@endsection