@extends('layouts.admin', ['title' => 'Export Data'])

@section('content')
    <div class="main-content">
        <div class="page-content">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <form>
                            <div class="card">
                                <div class="card-header">
                                    <h1>Export Data</h1>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-4">
                                            <label>Table</label>
                                            <select name="table" id="table_select" class="form-control">
                                                <option value="">Choose Table</option>
                                                @foreach(Config::get('constants.exportable') as $item)
                                                    @if(request()->get('table') == $item['table'])
                                                        <option value="{{$item['table']}}" selected>{{$item['name']}}</option>
                                                    @else
                                                        <option value="{{$item['table']}}">{{$item['name']}}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row pt-5">
                                        <div class="col-12">
                                            <h3 class="text-center pb-3">Filters</h3>
                                        </div>
                                    </div>
                                    <div class="row gy-3" id="filters">
                                        <div class="col-auto d-none" id="start_date_div">
                                            <label>Start Date</label>
                                            <input type="date" name="start_date" class="form-control" placeholder="start date" value="{{request()->get('start_date')}}">
                                        </div>
                                        <div class="col-auto d-none" id="end_date_div">
                                            <label>End Date</label>
                                            <input type="date" name="end_date" class="form-control" placeholder="start date" value="{{request()->get('end_date')}}">
                                        </div>
                                        <div class="col-auto d-none" id="gender_div">
                                            <label>Gender</label>
                                            <select name="gender" class="form-control" id="gender_select">
                                                <option value="">All</option>
                                                @foreach(Config::get('constants.genders') as $gender)
                                                    @if(request()->get('gender') == $gender)
                                                        <option value="{{$gender}}" selected>{{$gender}}</option>
                                                    @else
                                                        <option value="{{$gender}}">{{$gender}}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-auto d-none" id="status_div">
                                            <label>Status</label>
                                            <select name="status" class="form-control" id="status_select">
                                                <option value="">All</option>
                                                @foreach(Config::get('constants.statuses') as $status)
                                                    @if(request()->get('status') == $status)
                                                        <option value="{{$status}}" selected>{{$status}}</option>
                                                    @else
                                                        <option value="{{$status}}">{{$status}}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-auto d-none" id="module_div">
                                            <label>Training Modules</label>
                                            <select name="module" class="form-control" id="module_select">
                                                <option value="">All</option>
                                                @foreach($modules as $module)
                                                    @if(request()->get('module') == $module->id)
                                                        <option value="{{$module->id}}" selected>{{$module->title}}</option>
                                                    @else
                                                        <option value="{{$module->id}}">{{$module->title}}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-auto d-none" id="employment_type_div">
                                            <label>Employment Type</label>
                                            <select name="employment_type" class="form-control" id="employment_type_select">
                                                <option value="">All</option>
                                                @foreach(Config::get('constants.employment_types') as $type)
                                                    @if(request()->get('employment_type') == $type)
                                                        <option value="{{$type}}" selected>{{$type}}</option>
                                                    @else
                                                        <option value="{{$type}}">{{$type}}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-auto d-none" id="enterprise_div">
                                            <label>Enterprises</label>
                                            <select name="enterprise" class="form-control" id="enterprise_select">
                                                <option value="">All</option>
                                                @foreach($enterprises as $enterprise)
                                                    @if(request()->get('enterprise') == $enterprise->id)
                                                        <option value="{{$enterprise->id}}" selected>{{$enterprise->enterprise}}</option>
                                                    @else
                                                        <option value="{{$enterprise->id}}">{{$enterprise->enterprise}}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-auto d-none" id="district_div">
                                            <label>Districts</label>
                                            <select name="district" class="form-control" id="districts_filter">
                                                <option value="">All</option>
                                                @foreach($districts as $item)
                                                    @if(request()->get('district') == $item->id)
                                                        <option value="{{$item->id}}" selected>{{$item->district}}</option>
                                                    @else
                                                        <option value="{{$item->id}}">{{$item->district}}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-auto" id="subcounties-filter-div" style="display: none;">
                                            <label>Subcounties</label>
                                            <select name="subcounty" id="subcounties_filter">
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <div class="row justify-content-center">
                                        <div class="col-auto">
                                            <button type="submit" class="btn btn-soft-dark">Apply</button>
                                        </div>
                                        <div class="col-auto">
                                            <a href="{{url()->current()}}" type="button" class="btn btn-soft-danger">Clear</a>
                                        </div>
                                        <div class="col-4">
                                            <button class="btn btn-primary"><span class="ri-download-2-line"></span> DOWNLOAD</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        const exportables = {{Js::from(Config::get('constants.exportable'))}};
        const filters_div = document.getElementById('filters');
        document.getElementById('table_select').addEventListener('change', function(){
            tableChanged(this.value);
        })

        if ({{Js::from(request()->get('table'))}}) {
            tableChanged({{Js::from(request()->get('table'))}});
        }
        function tableChanged(value) {
            let exp = exportables.find((ex) => ex.table == value);

            for (let i = 0; i < filters_div.children.length; i++) {
                const childElement = filters_div.children[i];
                childElement.classList.add('d-none');
            }

            exp.filters.forEach(fl => {
                try {
                    document.getElementById(`${fl}_div`).classList.remove('d-none');
                } catch (e) {
                    console.log("div not found ::", fl)
                }
            })
        }
    </script>

    <script>
        $(document).ready(function(){
            // $('#table_select').select2({placeholder: "Choose table"});
            $('#employment_type_select').select2({placeholder: "Choose employment type"});
            $('#enterprise_select').select2({placeholder: "Choose enterprise"});
            $('#gender_select').select2({placeholder: "Choose gender"});
            $('#status_select').select2({placeholder: "Choose status"});
            $('#module_select').select2({placeholder: "Choose module"});
        })
    </script>
@endpush