@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="container-fluid py-3">

        {{-- Branch Action Card --}}
        <div class="card border-0 shadow-sm mb-4">

            <div class="card-body">

                <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">

                    <div>
                        <h5 class="fw-bold mb-1">
                            {{ $branch->branch_name }}
                        </h5>

                        <small class="text-muted">
                            {{ $branch->place ?? '-' }}
                        </small>
                    </div>

                    <div class="d-flex flex-wrap gap-2">

                        {{-- Add Login --}}
                        <button type="button"
                            class="btn btn-primary"
                            data-bs-toggle="modal"
                            data-bs-target="#addLoginPage">

                            <i class="bi bi-person-plus-fill me-1"></i>
                            Add Login
                        </button>

                        {{-- Kitchen Login --}}
                        <a href="{{ route('kitchen.login') }}"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="btn btn-success">

                            <i class="bi bi-shop me-1"></i>
                            Kitchen Login
                        </a>

                        {{-- Billing Login --}}
                        <a href="{{ route('billing.login') }}"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="btn btn-warning">

                            <i class="bi bi-receipt-cutoff me-1"></i>
                            Billing Login
                        </a>

                        {{-- View Staff Attendance --}}
                        <a href="{{ route('branch.view_branch', $branch->id) }}"
                            class="btn btn-info text-white">

                            <i class="bi bi-eye-fill me-1"></i>
                            View Staff Attendance
                        </a>

                    </div>

                </div>

            </div>

        </div>

        {{-- Billing / Kitchen Login Table --}}
        <div class="card border-0 shadow-sm">

            <div class="card-header bg-white border-bottom py-3">

                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">

                    <h5 class="fw-bold mb-0">
                        <i class="bi bi-person-badge me-1"></i>
                        Billing / Kitchen Counter Logins
                    </h5>

                    <div class="d-flex gap-2">

                        <select id="pageLength"
                            class="form-select form-select-sm"
                            style="width: 90px;">

                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>

                        </select>

                        <input type="text"
                            id="customSearch"
                            class="form-control form-control-sm"
                            placeholder="Search Login"
                            style="width: 220px;">

                    </div>

                </div>

            </div>

            <div class="table-responsive">

                <table class="table table-hover mb-0"
                    id="counterTable"
                    width="100%">

                    <thead class="bg-light">

                        <tr>

                            <th class="small fw-bold">
                                S.No
                            </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>

    </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">
                            <i class="bi bi-person-plus-fill me-1"></i>
                            Add Login
                        </h5>

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

                    </div>

                    <div class="modal-body">

                        <div class="mb-3">

                            <label class="form-label">
                                Type
                                <span class="text-danger">*</span>
                            </label>

                            <select name="type"
                                class="form-select @error('type', 'addCounter') is-invalid @enderror"
                                required>

                                <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="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                Counter Name
                                <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                name="counter_name"
                                value="{{ old('counter_name') }}"
                                class="form-control @error('counter_name', 'addCounter') is-invalid @enderror"
                                placeholder="Example: Counter 1"
                                required>

                            @error('counter_name', 'addCounter')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                Login ID
                                <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                name="login_id"
                                value="{{ old('login_id') }}"
                                class="form-control @error('login_id', 'addCounter') is-invalid @enderror"
                                placeholder="Enter Login ID"
                                required>

                            @error('login_id', 'addCounter')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                Password
                                <span class="text-danger">*</span>
                            </label>

                            <input type="password"
                                name="password"
                                class="form-control @error('password', 'addCounter') is-invalid @enderror"
                                placeholder="Enter Password"
                                required>

                            @error('password', 'addCounter')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>

                    </div>

                    <div class="modal-footer">

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

                            <i class="bi bi-x-circle me-1"></i>
                            Cancel

                        </button>

                        <button type="submit"
                            class="btn btn-success">

                            <i class="bi bi-check-circle me-1"></i>
                            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">
                            <i class="bi bi-pencil-square me-1"></i>
                            Edit Login
                        </h5>

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

                    </div>

                    <div class="modal-body">

                        <div class="mb-3">

                            <label class="form-label">
                                Type
                            </label>

                            <select name="type"
                                id="edit_type"
                                class="form-select"
                                required>

                                <option value="billing">
                                    Billing
                                </option>

                                <option value="kitchen">
                                    Kitchen
                                </option>

                            </select>

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                Counter Name
                            </label>

                            <input type="text"
                                name="counter_name"
                                id="edit_counter_name"
                                class="form-control"
                                required>

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                Login ID
                            </label>

                            <input type="text"
                                name="login_id"
                                id="edit_login_id"
                                class="form-control"
                                required>

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                Password
                            </label>

                            <input type="password"
                                name="password"
                                class="form-control"
                                placeholder="Leave blank to keep existing 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">

                            <i class="bi bi-check-circle me-1"></i>
                            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

                    <input type="hidden"
                        name="id"
                        id="delete_counter_id">

                    <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 login?

                    </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">

                            <i class="bi bi-trash me-1"></i>
                            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">

            <div class="modal-content text-center p-4">

                <h5 class="fw-bold">
                    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 gap-2">

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

                        Cancel

                    </button>

                    <button type="button"
                        class="btn btn-success"
                        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'
                    }

                ],

                columnDefs: [
                    {
                        targets: '_all',
                        className: 'align-middle text-nowrap'
                    }
                ],

                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();
            });

            $(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');
            });

            $(document).on('click', '.deleteCounterBtn', function() {

                $('#delete_counter_id').val($(this).data('id'));

            });

            let statusTargetId = null;
            let statusTargetValue = null;

            $(document).on('click', '.statusToggleBtn', function() {

                statusTargetId = $(this).data('id');
                statusTargetValue = $(this).data('status');

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

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

            });

            $('#confirmStatusChange').on('click', function() {

                const button = $(this);

                button
                    .prop('disabled', true)
                    .html('<span class="spinner-border spinner-border-sm me-1"></span> Updating...');

                $.ajax({

                    url: "{{ route('branch.billing_counter_status') }}",

                    type: "POST",

                    data: {
                        _token: "{{ csrf_token() }}",
                        id: statusTargetId,
                        status: statusTargetValue
                    },

                    success: function(response) {

                        $('#statusModal').modal('hide');

                        table.ajax.reload(null, false);

                    },

                    error: function(xhr) {

                        console.error(xhr.responseText);

                        alert(
                            xhr.responseJSON?.message ??
                            'Unable to update status.'
                        );

                    },

                    complete: function() {

                        button
                            .prop('disabled', false)
                            .text('Yes, Change');

                    }

                });

            });

        });
    </script>

    @if (
        $errors->addCounter->has('type') ||
        $errors->addCounter->has('counter_name') ||
        $errors->addCounter->has('login_id') ||
        $errors->addCounter->has('password')
    )

        <script>
            document.addEventListener('DOMContentLoaded', function() {

                const modalElement =
                    document.getElementById('addLoginPage');

                if (modalElement) {

                    const modal =
                        new bootstrap.Modal(modalElement);

                    modal.show();

                }

            });
        </script>

    @endif

@endsection