@extends('layouts.app')
@section('additionnalCSS')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/pickadate/default.css') }}" >
    <link rel="stylesheet" type="text/css" href="{{ asset('css/pickadate/default.date.css') }}" >
    <link rel="stylesheet" type="text/css" href="{{ asset('css/selectsearch/chosen.css') }}" >
    <meta name="csrf-token" content="{{ csrf_token() }}" />
@stop
@section('content')
    <div class="container mb-5">
        <div class="row justify-content-md-center mt-3">
            <div class="col col-lg-3">
            </div>
            <div class="col-lg-5">
                @if(session()->has('dateError'))
                    <div class="alert alert-danger alert-block">
                        <button type="button" class="close" data-dismiss="alert">x</button>
                        {{ session()->get('dateError') }}
                    </div>
                @endif
                <form method="POST" action="{{ route('borrow.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="first_name_borrower">Prénom </label>
                        <input name="first_name_borrower" type="text" class="form-control @error('first_name_borrower') is-invalid @enderror" id="first_name_borrower" placeholder="Prénom">
                        @error('first_name_borrower')
                        <div class="alert alert-danger mt-2">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="surname_borrower">Nom</label>
                        <input name="surname_borrower" type="text" class="form-control @error('surname_borrower') is-invalid @enderror" id="surname_borrower" placeholder="Nom">
                        @error('surname_borrower')
                        <div class="alert alert-danger mt-2">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="email_borrower">Email</label>
                        <input name="email_borrower" type="text" class="form-control @error('email_borrower') is-invalid @enderror" id="email_borrower" required>
                        @error('email_borrower')
                        <div class="alert alert-danger mt-2">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col">
                                <label for="equipment_id">Equipment</label>
                            </div>
                            <div class="col">
                                <select name='equipment_id' class="chosen-select @error('equipment_id') is-invalid @enderror" id="equipment_id">
                                    @foreach($equipments as $equipment)
                                        <option value="{{ $equipment->id }}">{{ $equipment->code }}-{{ $equipment->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        @error('equipment_id')
                        <div class="alert alert-danger mt-2">
                            {{ $message }}
                        </div>
                        @enderror

                    </div>
                    <div class="row">
                        <div class="col">
                            <label for="datepicker1">Date de début</label>
                        </div>
                        <div class="col">
                            <input name="start_date" type="text" class="datepicker" id="datepicker1">
                        </div>
                    </div>
                    <div class="row mt-1">
                        <div class="col">
                            <label for="datepicker2">Date de fin</label>
                        </div>
                        <div class="col">
                            <input name="end_date" type="text" class="datepicker" id="datepicker2">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary mt-3">Envoyer</button>
                </form>
            </div>
            <div class="col col-lg-4" id="plannedBorrows">
            </div>
        </div>
    </div>
@stop
@section('additionnalScript')
    <script src="{{ asset('javascript/pickadate/picker.js') }}"></script>
    <script src="{{ asset('javascript/pickadate/picker.date.js') }}"></script>
    <script src="{{ asset('javascript/pickadate/fr_FR.js') }}"></script>
    <script src="{{ asset('javascript/selectsearch/chosen.jquery.js') }}"></script>
    <script src="{{ asset('javascript/selectsearch/chosen.proto.js') }}"></script>
    <script>
        $('.datepicker').pickadate({
            format: 'yyyy-mm-dd',
            clear: '',
        });

        $(".chosen-select").chosen()

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $("#equipment_id").change(function(e){
            var equipment_id = e.target.value;
            $.ajax({
                url: "{{ route('borrow.planned') }}",
                type: 'POST',
                data: {
                    equipment_id: equipment_id,
                },
                success: function(data) {
                    $('#plannedBorrows').html(data.html);
                }
            });
        });
    </script>
@stop