@extends('layouts.app')

@section('content')
    <div id="page1" class="container">

        @include('layouts.commons.errors')
        @include('layouts.commons.success')
        <h2 class="pb-2 mb-5">Import Cartographie</h2>

        <form method="POST" action="{{ route('import-cartographie.index') }}" enctype="multipart/form-data">
            @csrf
            <div class="form-group row">
                <div class="col-sm-4">

                    <label>Sélectionner un client :</label>
                    <select id="customer-select" name="customer" class="form-control">
                        <option value="">Rechercher un client</option>
                        @if(is_array($customers ?? '') && count($customers ?? '') > 0)
                            @foreach($customers ?? '' as $index => $customer)
                                    <option
                                        value="{{$customer['id']}}">{{$customer['nom']}}
                                    </option>
                            @endforeach
                        @endif
                    </select>

                <div class="input-group d-flex flex-column mt-5">
                    <label>Choisissez un fichier client :</label>
                        <input type="file"
                               class="btn btn-primary p-3"
                               id="cartography"
                               value="{{ old('cartography') }}"
                               name="cartography"
                               aria-describedby="nomenclature"
                               accept=".csv"
                        >
                        <button
                            class="btn btn-primary p-3 mt-5" id="submit-button-csv" type="submit">
                            Importer
                        </button>
                </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('unique-js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const elements = [document.getElementById("customer-select"), document.getElementById("cartography")];

            elements.forEach(elem => {
                elem.addEventListener("change", () => {
                    const allFilled = elements.every(elem => elem.value.trim() !== '');
                    document.getElementById("submit-button-csv").disabled = !allFilled;
                });
            });

            document.getElementById('customer-select').dispatchEvent(new Event('change'));
            document.getElementById('cartography').dispatchEvent(new Event('change'));
        });

    </script>
@endsection