@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: 48%; /* 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%;
    }
}

.product-form {
    padding-left: 20px;
    padding-right: 20px;
    /* You can adjust these values to increase or decrease the space */
}

@media (max-width: 768px) {
    /* For smaller screens, you can reduce the padding */
    .product-form {
        padding-left: 10px;
        padding-right: 10px;
    }
}

</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">{{ __('Export Categories') }}</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>{{ __('Select Data Type') }}</p>
                                    </div>
                                </div>
                                <div class="export-steps-item">
                                    <div class="inner step-card">
                                        <h5>{{ __('STEP 2') }}</h5>
                                        <p>{{ __('Select Data Range by Date and Export') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><br><br>
                    <form class="product-form" action="{{route('owner.category.bulk-export')}}" method="POST" enctype="multipart/form-data" style="margin-top:50px">
                    @csrf
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="input-label" for="exampleFormControlSelect1">{{ __('type')}}<span
                                        class="input-label-secondary"></span></label>
                                <select name="type" id="type" data-placeholder="{{ __('Select')}} {{ __('type')}}" class="form-control" required title="Select Type">
                                    <option value="all">{{ __('all data')}}</option>
                                    <option value="date_wise">{{ __('Date')}} {{ __('wise')}}</option>
                                    <option value="id_wise">{{ __('ID')}} {{ __('wise')}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group id_wise">
                                <label class="input-label" for="exampleFormControlSelect1">{{ __('start')}} {{ __('ID')}}<span
                                        class="input-label-secondary"></span></label>
                                <input type="number" name="start_id" class="form-control">
                            </div>
                            <div class="form-group date_wise">
                                <label class="input-label" for="exampleFormControlSelect1">{{ __('from')}} {{ __('Date')}}<span
                                        class="input-label-secondary"></span></label>
                                <input type="date" name="from_date" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group id_wise">
                                <label class="input-label" for="exampleFormControlSelect1">{{ __('end')}} {{ __('ID')}}<span
                                        class="input-label-secondary"></span></label>
                                <input type="number" name="end_id" class="form-control">
                            </div>
                            <div class="form-group date_wise">
                                <label class="input-label text-capitalize" for="exampleFormControlSelect1">{{ __('to')}} {{ __('Date')}}<span
                                        class="input-label-secondary"></span></label>
                                <input type="date" name="to_date" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="btn--container justify-content-end">
                        <button class="btn btn--reset" type="reset">{{ __('reset')}}</button>
                        <button class="btn btn-success" type="submit">{{ __('Export')}}</button>
                    </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).ready(function() {
    $('.id_wise').hide();
    $('.date_wise').hide();
    $('#type').on('change', function() {
        var selectedType = $(this).val();
        $('.id_wise').hide();
        $('.date_wise').hide();
        if (selectedType === 'date_wise') {
            $('.date_wise').show();
        } else if (selectedType === 'id_wise') {
            $('.id_wise').show();
        }
    });
    $('#type').trigger('change');
});

</script>
@endsection