@extends('admin.layout')
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>
        .dt-search {
            display: none;
        }

        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 2px 14px rgba(30, 41, 59, 0.04);
        }

        .form-control,
        .form-select {
            border-radius: 8px;
        }

        .btn-brand-primary {
            background-color: #D34821 !important;
            color: #ffffff !important;
            border: none;
        }

        .btn-brand-primary:hover {
            background-color: #b83d1b !important;
            color: #ffffff !important;
        }

        .table th {
            white-space: nowrap;
        }

        .table td {
            vertical-align: middle;
        }

        .action-btn {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 7px;
            border: none;
        }

        .btn-edit {
            background: #eef2ff;
            color: #696cff;
        }

        .btn-edit:hover {
            background: #696cff;
            color: #fff;
        }

        .btn-delete {
            background: #fff1f2;
            color: #dc3545;
        }

        .btn-delete:hover {
            background: #dc3545;
            color: #fff;
        }
    </style>

 <div class="col-auto">

                <h5>

                    <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                        <a href="{{ route('admin.stock_list') }}">

                            <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" class="icon icon-tabler">

                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                                <path d="M15 6l-6 6l6 6" />

                            </svg>

                        </a>

                    </button>

                    Brand Management

                </h5>

            </div>
    {{-- <div class="mb-4">
        <h5 class="fw-normal text-muted mb-0"><span class="fw-bold text-dark">Brand Management</span></h5>
    </div> --}}

    <!-- Add Brand Form -->
    <div class="card p-4 mb-4">
        <h6 class="fw-bold mb-3">Add New Brand</h6>
        <form action="{{ route('brand_store') }}" method="POST" id="addBrandForm">
            @csrf
            <div class="row align-items-end">
                <div class="col-md-9 col-12">
                    <label class="form-label small text-muted fw-semibold">Brand Name</label>
                    <input type="text" name="brand_name" id="brand_name" class="form-control"
                        value="{{ old('brand_name') }}" placeholder="Enter brand name">
                </div>
                <div class="col-md-3 col-12 mt-3 mt-md-0 text-end">
                    <button type="submit" class="btn btn-brand-primary w-100" id="saveBrandBtn">Add Brand</button>
                </div>
            </div>
            @error('brand_name')
                <div class="text-danger small mt-1">{{ $message }}</div>
            @enderror
        </form>
    </div>

    <!-- Table Section -->
    <div class="card p-3">
        <div class="row mb-3 align-items-center g-2">
            <div class="col-auto">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="All">All</option>
                </select>
            </div>
            <div class="col-lg-auto ms-auto col-12">
                <div class="d-flex flex-column flex-lg-row gap-2">
                    <input type="text" id="customSearch" class="form-control" placeholder="Search brand..."
                        style="width:263px;">
                    <button type="button" id="exportBtn" class="btn btn-outline-secondary">Export</button>
                </div>
            </div>
        </div>
        <div class="table-responsive pt-0 pb-2">
            <table class="table table-bordered  rounded w-100" id="brandTable">
                <thead>
                    <tr>
                        <th width="10%">S.No</th>
                        <th>Brand Name</th>
                        <th width="15%">Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <!-- Edit Modal Form -->
    <div class="modal fade" id="editBrandModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Brand</h5>
                </div>
                <form action="{{ route('brand_update') }}" method="POST" id="editBrandForm">
                    @csrf
                    <input type="hidden" id="edit_brand_id" name="id">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Brand Name <span class="text-danger">*</span></label>
                            <input type="text" name="brand_name" id="edit_brand_name" class="form-control"
                                placeholder="Enter brand name">
                        </div>
                    </div>
                    <div class="modal-footer  d-flex align-items-center justify-content-center">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-brand-primary" id="updateBrandBtn">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Modal Form -->
    <div class="modal fade" id="deleteBrandModal" 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">Are you sure?</h5>
                <p class="text-muted mb-0">Confirm deletion of <strong id="deleteBrandName"></strong>?</p>
                <form action="{{ route('brand_delete') }}" method="POST">
                    @csrf
                    <input type="hidden" name="id" id="deleteBrandId">
                    <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                        <button type="button" class="btn btn-outline-secondary p-2 px-3 fw-semibold"
                            data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger p-2 px-3 fw-semibold" id="confirmDeleteBrand">Yes,
                            Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function() {
            let table = $('#brandTable').DataTable({
                processing: true,
                serverSide: true,
                lengthChange: false,
                searching: true,
                ajax: "{{ route('brand_list_data') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'brand_name',
                        name: 'brand_name'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            $('#customSearch').on('keyup', function() {
                table.search($(this).val()).draw();
            });

            $('#pageLength').on('change', function() {
                let value = $(this).val();
                table.page.len(value === 'All' ? 100000 : parseInt(value)).draw();
            });

            // Handle Edit Modal Data Binding
            $('#brandTable tbody').on('click', '.edit-brand', function() {
                let id = $(this).data('id');
                let name = $(this).data('name');

                $('#edit_brand_id').val(id);
                $('#edit_brand_name').val(name);
                $('#editBrandModal').modal('show');
            });

            // Handle Delete Modal Data Binding
            $('#brandTable tbody').on('click', '.delete-brand', function() {
                let id = $(this).data('id');
                let name = $(this).data('name');

                $('#deleteBrandId').val(id);
                $('#deleteBrandName').text(name);
                $('#deleteBrandModal').modal('show');
            });

            // Export Button Action
            $('#exportBtn').on('click', function() {
                let exportButton = $(this);
                exportButton.prop('disabled', true).html(
                    '<i class="fas fa-spinner fa-spin me-1"></i> Exporting...');
                try {
                    let data = [
                        ['S.No', 'Brand Name']
                    ];
                    table.rows({
                        search: 'applied'
                    }).every(function() {
                        let row = this.data();
                        data.push([row.DT_RowIndex ?? '', row.brand_name ?? '']);
                    });
                    if (data.length > 1) {
                        let csvContent = data.map(row => row.map(val =>
                            `"${String(val).replace(/"/g, '""')}"`).join(',')).join('\n');
                        let blob = new Blob(['\ufeff' + csvContent], {
                            type: 'text/csv;charset=utf-8;'
                        });
                        let url = URL.createObjectURL(blob);
                        let link = document.createElement('a');
                        link.href = url;
                        link.download = 'brands_' + new Date().toISOString().slice(0, 10) + '.csv';
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        URL.revokeObjectURL(url);
                    }
                } finally {
                    exportButton.prop('disabled', false).html('Export');
                }
            });
        });
    </script>
    <script>
    $('#saveBrandBtn').closest('form').on('submit', function () {

        const button = $('#saveBrandBtn');

        button.prop('disabled', true);

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