@extends('layouts.app', ['title' => __('categories')])

@section('admin_title')
    {{ __('categories') }}
@endsection

@section('content')

<style>
.export-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
}

.export-steps {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.export-steps li {
    padding: 10px 0;
    border-bottom: 1px dashed #ddd;
}

.export-steps li:last-child {
    border-bottom: none;
}

.product-form {
    padding: 20px;
    background: #fff;
    border-radius: 10px;
}

.form-group label {
    font-weight: 600;
}
</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">
                    <h3 class="mb-0">{{ __('Export Categories') }}</h3>
                </div>

                <div class="col-12">
                    @include('partials.flash')
                </div>

                {{-- Instructions --}}
                <div class="card-body">
                    <div class="mb-4">
                    
                        <div class="export-steps">
                            <p>Select the export type (All, Date Wise, or ID Wise).</p>
                            <p>For Date Wise, choose a start and end date.</p>
                            <p>For ID Wise, provide the starting and ending category IDs.</p>
                            <p>Cpck the <b>Export</b> button.</p>
                            <p>The system will download the exported category file.</p>
                            <p>Use the file for backup, reporting, or re-import.</p>
</div>
                    </div>

                    {{-- Export Form --}}
                    <form class="product-form" action="{{ route('owner.category.bulk-export') }}" method="POST">
                        @csrf

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>{{ __('Export Type') }}</label>
                                    <select name="type" id="type" class="form-control" required>
                                        <option value="date_wise" selected>
                                            {{ __('Date Wise') }}
                                        </option>
                                        <option value="all">
                                            {{ __('All Data') }}
                                        </option>
                                        <option value="id_wise">
                                            {{ __('ID Wise') }}
                                        </option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-4 date_wise">
                                <div class="form-group">
                                    <label>{{ __('From Date') }}</label>
                                    <input type="date" name="from_date" class="form-control">
                                </div>
                            </div>

                            <div class="col-md-4 date_wise">
                                <div class="form-group">
                                    <label>{{ __('To Date') }}</label>
                                    <input type="date" name="to_date" class="form-control">
                                </div>
                            </div>

                            <div class="col-md-4 id_wise">
                                <div class="form-group">
                                    <label>{{ __('Start ID') }}</label>
                                    <input type="number" name="start_id" class="form-control">
                                </div>
                            </div>

                            <div class="col-md-4 id_wise">
                                <div class="form-group">
                                    <label>{{ __('End ID') }}</label>
                                    <input type="number" name="end_id" class="form-control">
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end mt-4">
                            <button class="btn btn-outline-secondary mr-2" type="reset">
                                {{ __('Reset') }}
                            </button>
                            <button class="btn btn-success" type="submit">
                                {{ __('Export') }}
                            </button>
                        </div>
                    </form>
                </div>

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

    @include('layouts.footers.auth')
</div>

@endsection

@section('js')
<script>
$(document).ready(function () {

    function toggleFields() {
        let type = $('#type').val();

        $('.id_wise').hide();
        $('.date_wise').hide();

        if (type === 'date_wise') {
            $('.date_wise').show();
        } else if (type === 'id_wise') {
            $('.id_wise').show();
        }
    }

    $('#type').on('change', toggleFields);

    // Default load → Date Wise visible
    toggleFields();
});
</script>
@endsection