@extends('admin.layouts.master')

@section('title', __('admin.brands'))
@section('page_title', __('admin.brands'))

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('admin.dashboard') }}</a></li>
    <li class="breadcrumb-item active">{{ __('admin.brands') }}</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-tags"></i> {{ __('admin.brands') }}</h3>
        <div class="card-tools">
            @can('brands.create')
                <button type="button" class="btn btn-primary btn-sm" id="addBrandBtn">
                    <i class="fas fa-plus"></i> {{ __('admin.add') }}
                </button>
            @endcan
        </div>
    </div>
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-3">
                <select class="form-control form-control-sm filter-input" id="filter_status">
                    <option value="">— {{ __('admin.status') }} —</option>
                    <option value="active">{{ __('admin.active') }}</option>
                    <option value="inactive">{{ __('admin.inactive') }}</option>
                </select>
            </div>
        </div>
        <table id="brandsTable" class="table table-bordered table-striped table-hover" style="width:100%">
            <thead>
                <tr>
                    <th>#</th>
                    <th>الشعار</th>
                    <th>{{ __('admin.name') }}</th>
                    <th>البلد</th>
                    <th>منتجات</th>
                    <th>{{ __('admin.status') }}</th>
                    <th>{{ __('admin.created_at') }}</th>
                    <th>{{ __('admin.actions') }}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@include('admin.brands._modal')
@endsection

@push('scripts')
@include('admin._partials.crud_scripts')
<script>
$(function () {
    const table = $('#brandsTable').DataTable({
        processing: true, serverSide: true, responsive: true, order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.brands.data') }}',
            data: d => { d.status = $('#filter_status').val(); }
        },
        language: { url: OFP.dtLanguage },
        columns: [
            { data: 'id',                   name: 'id', width: '60px' },
            { data: 'logo',                 name: 'logo', orderable: false, searchable: false },
            { data: 'name',                 name: 'name' },
            { data: 'country',              name: 'country' },
            { data: 'products_count_badge', name: 'products_count', orderable: false, searchable: false },
            { data: 'status',               name: 'status' },
            { data: 'created_at',           name: 'created_at' },
            { data: 'actions',              name: 'actions', orderable: false, searchable: false }
        ]
    });

    $('.filter-input').on('change', () => table.ajax.reload());

    $('#addBrandBtn').on('click', function () {
        $('#brandForm').trigger('reset')[0].action = '{{ route('admin.brands.store') }}';
        $('#brandMethod').val('POST');
        $('#brandLogoPreview').attr('src', 'https://placehold.co/120x120/eee/666?text=?');
        $('#brandModalLabel').text('{{ __('admin.add') }}');
        $('#brandModal').modal('show');
    });

    $('#brandsTable tbody').on('click', '.edit-brand-btn', function () {
        const id = $(this).data('id');
        $.get('{{ url('admin/brands') }}/' + id, function (b) {
            OFP.populateForm($('#brandForm'), b);
            $('#brandForm')[0].action = '{{ url('admin/brands') }}/' + b.id;
            $('#brandMethod').val('PUT');
            $('#brandLogoPreview').attr('src', b.logo_url || 'https://placehold.co/120x120/eee/666?text=?');
            $('#brandModalLabel').text('{{ __('admin.edit') }} — ' + b.name);
            $('#brandModal').modal('show');
        });
    });

    $('input[name=logo]').on('change', function () {
        const f = this.files && this.files[0];
        if (!f) return;
        const r = new FileReader();
        r.onload = e => $('#brandLogoPreview').attr('src', e.target.result);
        r.readAsDataURL(f);
    });

    @if($errors->any()) $('#brandModal').modal('show'); @endif
});
</script>
@endpush