@extends('layouts.app', ['title' => __('categories')])
@section('admin_title')
    {{__('categories')}}
@endsection
@section('content')
<style>
/* Flexbox layout to align all items in a single row */
.export-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Adds spacing between the sections */
    gap: 20px; /* Adds space between the cards */
}

.export-steps-item {
    flex: 1; /* This allows each item to take up equal width */
    max-width: 30%; /* You can adjust max-width to make the columns responsive */
}

.step-card {
    background-color: #f0f0f0; /* Gray background */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    /* For small screens, make the layout stack vertically */
    .export-steps-item {
        max-width: 100%;
    }
}
</style>

    <div class="header bg-gradient-primary pb-8 pt-5 pt-md-5">
    </div>
    <div class="container-fluid mt--7">      
        <div class="row">
            <div class="col">
                <div class="card shadow">
                    <div class="card-header border-0">
                        <div class="row align-items-center">
                            <div class="col-12">
                                <h3 class="mb-0">{{ __('Categories bulk import') }}</h3>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        @include('partials.flash')
                    </div>
                    <div class="card">
                        <div class="card-body p-2">
                            <div class="export-steps style-2">
                                <div class="export-steps-item">
                                    <div class="inner step-card">
                                        <h5>{{ __('STEP 1') }}</h5>
                                        <p>{{ __('Download Excel File') }}</p>
                                    </div>
                                </div>
                                <div class="export-steps-item">
                                    <div class="inner step-card">
                                        <h5>{{ __('STEP 2') }}</h5>
                                        <p>{{ __('Match Spreadsheet data according to instruction') }}</p>
                                    </div>
                                </div>
                                <div class="export-steps-item">
                                    <div class="inner step-card">
                                        <h5>{{ __('STEP 3') }}</h5>
                                        <p>{{ __('Validate data and complete import') }}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="jumbotron  pt-1 pb-4 mb-0 bg-white">
                                <h2 class="mb-3 text-primary">{{ __('instructions') }}</h2>
                                <p> {{ __('1. Download the format file and fill it with proper data.') }}</p>
            
                                <p><p>{{ __('2. You can download the example file to understand how the data must be filled.') }}</p>
            
                                <p>{{ __('3. Once you have downloaded and filled the format file, upload it in the form below and
                                    submit.') }}</p>
            
                                <p> {{ __('4. Please input the right ids.') }}</p>
                                <p> {{ __('5. For a category parent id will be empty for sub category it will be the category id.') }}</p>
                                <p> {{ __("6. When inserting a category for a restaurant, make sure to copy and paste the exact name of the registered restaurant to ensure it is correctly added for that specific restaurant. If there is any mistake or mismatch in the restaurant's name, the category will be assigned to the admin by default.") }}</p>
                                <p> {{ __('7. If you want to import a category on behalf of the admin instead of a specific restaurant, you must enter Admin in the restaurant column.') }}</p>
                            </div>
                            <div class="text-center pb-4">
                                <h3 class="mb-3 export--template-title">{{ __('Download Spreadsheet Template') }}</h3>
                                <div class="btn--container justify-content-center export--template-btns">
                                    <a href="{{asset('categories_bulk_format.xlsx')}}" download=""
                                        class="btn btn-dark">{{ __('Template with Existing Data') }}</a>
                                    <a href="{{asset('categories_bulk_without_data_format.xlsx')}}" download=""
                                        class="btn btn-dark">{{ __('Template without Data') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <form class="product-form" action="{{route('owner.category.bulk-import-data')}}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="card mt-2 rest-part">
                            <div class="card-body">
                                <h4 class="mb-3">{{ __('Import Categories File')}}</h4>
                                <div class="custom-file custom--file">
                                    <input type="file" name="products_file" class="form-control" id="bulk__import">
                                    <label class="custom-file-label" for="bulk__import">{{  __('Choose File') }}</label>
                                </div>
                            </div>
                            <div class="card-footer border-0">
                                <div class="btn--container justify-content-end">
                                    <button type="submit" class="btn btn-success">{{  __('Save') }}</button>
                                </div>
                            </div>
                        </div>
            
                    </form>
                    <div class="card-footer py-4">
                        <nav class="d-flex justify-content-end" aria-label="...">
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        @include('layouts.footers.auth')
    </div>
@endsection
@section('js')
<script>
document.getElementById('bulk__import').addEventListener('change', function(event) {
    var fileName = event.target.files[0].name;
    var label = document.querySelector('label[for="bulk__import"]');
    label.textContent = fileName;
});
</script>
@endsection