@extends('admin.layouts.app')

@section('title', 'Gestion des Marques')

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Liste des Marques</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#brandModal">
                    <i class="fas fa-plus"></i> Nouvelle Marque
                </button>
            </div>
        </div>
        <div class="card-body">
            <table id="brandsTable" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Nom</th>
                        <th>Code</th>
                        <th>Description</th>
                        <th>Statut</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    @include('admin.brands.modals.form')
@endsection
@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
@endpush

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- DataTables -->
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>

    <!-- Toastr -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

    <!-- SweetAlert2 for better confirmations -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        let table = $('#brandsTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.brands.getData') }}",
            columns: [{
                    data: 'image',
                    name: 'image',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'code',
                    name: 'code'
                },
                {
                    data: 'description',
                    name: 'description'
                },
                {
                    data: 'status',
                    name: 'is_active'
                },
                {
                    data: 'actions',
                    name: 'actions',
                    orderable: false,
                    searchable: false
                }
            ],
            language: {
                url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
            }
        });

        // Image preview function
        function previewImage(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#image_preview').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        function editBrand(id) {
            $.get(`/admin/brands/${id}/edit`, function(data) {
                $('#brand_id').val(data.brand.id);
                $('#name').val(data.brand.name);
                $('#code').val(data.brand.code);
                $('#description').val(data.brand.description);
                $('#is_active').prop('checked', data.brand.is_active);
                if (data.brand.image) {
                    $('#image_preview').attr('src', `/storage/${data.brand.image}`);
                } else {
                    $('#image_preview').attr('src', '/images/no-image.png');
                }
                $('#brandModal').modal('show');
            });
        }

        // Form submission with file upload
        $('#brandForm').on('submit', function(e) {
            e.preventDefault();
            let id = $('#brand_id').val();
            let url = id ? `/admin/brands/${id}` : '/admin/brands';
            let method = id ? 'PUT' : 'POST';

            let formData = new FormData(this);
            if (method === 'PUT') {
                formData.append('_method', 'PUT');
            }

            $.ajax({
                url: url,
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    $('#brandModal').modal('hide');
                    table.ajax.reload();
                    toastr.success(response.success);
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        Object.keys(errors).forEach(key => {
                            toastr.error(errors[key][0]);
                        });
                    } else {
                        toastr.error(xhr.responseJSON.error || 'Une erreur est survenue');
                    }
                }
            });
        });

        function deleteBrand(id) {
            if (confirm('Êtes-vous sûr de vouloir supprimer cette marque ?')) {
                $.ajax({
                    url: `/admin/brands/${id}`,
                    method: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        table.ajax.reload();
                        toastr.success(response.success);
                    },
                    error: function(xhr) {
                        toastr.error(xhr.responseJSON.error || 'Une erreur est survenue');
                    }
                });
            }
        }

        // Reset form and image preview when modal is closed
        $('#brandModal').on('hidden.bs.modal', function() {
            $('#brandForm')[0].reset();
            $('#brand_id').val('');
            $('#image_preview').attr('src', '/images/no-image.png');
            $('.custom-file-label').text('Choisir une image');
        });

        // Update file input label
        $('.custom-file-input').on('change', function() {
            let fileName = $(this).val().split('\\').pop();
            $(this).next('.custom-file-label').html(fileName);
        });
    </script>
@endpush