@include('header')


<!--**********************************
            Content body start
        ***********************************-->
<div class="content-body">
    <div class="page-titles">
        <h5 class="dashboard_bar">Brand Information</h5>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">
                    Dashboard </a>
            </li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">Add Brand</a></li>
        </ul>
    </div>
    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Brand</h4>
                    </div>
                    <div class="card-body">
                        <div class="form-validation">

                            <form method="POST" action="{{ route('settings.add_brand') }}" id="brandForm">
                                @csrf
                                <input type="hidden" id="brand_id" name="id">

                                <div class="row align-items-center mb-3">
                                    <label class="col-md-2 col-form-label">Category <span
                                            class="text-danger">*</span></label>
                                    <div class="col-md-2">
                                        <select class="default-placeholder" id="category" name="category_id" required>
                                            <option value="" selected disabled>Select Category</option>
                                            @foreach($category as $item)
                                            <option value="{{ $item->id }}">{{ $item->category }}</option>
                                            @endforeach
                                        </select>
                                    </div>



                                    <label class="col-md-2 col-form-label">Brand <span
                                            class="text-danger">*</span></label>
                                    <div class="col-md-2">
                                        <input type="text" name="brand" class="form-control text-capitalize"
                                            id="brand_input" placeholder="Enter Brand" required>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>

            </div>

        </div>
        <div class="col-xl-12">
            <div class="card dz-card" id="accordion-three">
                <div class="card-header flex-wrap d-flex justify-content-between border-0">
                    <div>
                        <h4 class="card-title">Brands</h4>

                    </div>

                </div>

                <!-- /tab-content -->
                <div class="tab-content" id="myTabContent-2">
                    <div class="tab-pane fade show active" id="withoutSpace" role="tabpanel"
                        aria-labelledby="home-tab-2">
                        <div class="card-body pt-0">
                            <div class="table-responsive">
                                <table id="example3" class="display table" style="min-width: 845px">
                                    <thead>
                                        <tr>
                                            <th>S.No</th>
                                            <th>Category</th>
                                            <th>Brand</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $sno = 1; @endphp

                                        @foreach($brand as $brand1)
                                        <tr>
                                            <td>
                                                {{ $sno++ }}

                                            </td>
                                            <td>{{ $brand1->category->category }}</td>
                                            <td>{{ $brand1->brand }}</td>
                                            <td>
                                                <a href="javascript:void(0);"
                                                    class="badge bg-primary text-decoration-none edit-brand"
                                                    data-id="{{ $brand1->id }}" data-name="{{ $brand1->brand }}" data-category-id="{{ $brand1->category_id }}">
                                                    <i class="fas fa-pencil-alt"></i>
                                                </a>
                                                 <a href="javascript:void(0);"
                                                    class="badge bg-danger text-decoration-none delete-brand"
                                                    data-id="{{ $brand1->id }}" data-name="{{ $brand1->brand }}" data-category-id="{{ $brand1->category_id }}">
                                                    <i class="fas fa-trash-alt"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- /tab-content -->

            </div>
        </div>
    </div>
</div>
@include('footer')
<!-- Load SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Trigger Swal if session has success -->
@if(session('success'))
<script>
Swal.fire({
    title: 'Success!',
    text: {
        !!json_encode(session('success')) !!
    },
    icon: 'success'
}).then(() => {
    location.reload();
});
</script>
@endif
<script>
    // Template URL with placeholder for brand ID
    const deleteBrandUrlTemplate = "{{ route('brands.destroy', ['id' => ':id']) }}";
</script>

<script>
document.querySelectorAll('.edit-brand').forEach(function(button) {
    button.addEventListener('click', function() {
        const brandId = this.getAttribute('data-id');
        const brandName = this.getAttribute('data-name');
        const categoryId = this.getAttribute('data-category-id'); // ✅ Get category ID

        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });

        // ✅ Set the input value for editing
        document.getElementById('brand_input').value = brandName;

        // ✅ Set hidden input
        document.getElementById('brand_id').value = brandId;

        // ✅ Set category dropdown
        $('#category').val(categoryId).trigger('change');

        // ✅ Set form action
        document.getElementById('brandForm').action = '{{ route("settings.update_brand") }}';

        // ✅ Change button label
        document.getElementById('submitBtn').innerText = 'Update';
    });
});
document.querySelectorAll('.delete-brand').forEach(button => {
    button.addEventListener('click', function() {
        const brandId = this.getAttribute('data-id');
        const brandName = this.getAttribute('data-name');

        Swal.fire({
            title: `Delete "${brandName}"?`,
            text: "Are you sure you want to delete this brand?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                // Replace :id placeholder with actual brandId
                const url = deleteBrandUrlTemplate.replace(':id', brandId);

                $.ajax({
                    url: url,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire('Deleted!', response.message, 'success');
                            location.reload();
                        } else {
                            Swal.fire('Error', response.message, 'error');
                        }
                    },
                    error: function() {
                        Swal.fire('Error', 'Something went wrong!', 'error');
                    }
                });
            }
        });
    });
});

</script>