@extends('layouts.app')

@section('css_after')
    <!-- Page JS Plugins CSS -->
    <link rel="stylesheet" href="{{ asset('js/plugins/fullcalendar/main.min.css') }}">
    <link rel="stylesheet" href="{{ asset('js/plugins/flatpickr/flatpickr.min.css') }}">

@endsection

@section("js_after")
    <script src="{{ asset('js/plugins/fullcalendar/main.min.js') }}"></script>
    <script src="{{ asset('js/plugins/fullcalendar/locales/fr.js') }}"></script>
    <script src="{{ asset('js/plugins/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ asset('js/plugins/flatpickr/l10n/fr.js') }}"></script>
    <script src="{{ asset('js/pages/visit/create.js') }}"></script>
@endsection

@section('content')
    <style>
        .fc-month-view span.fc-title {
            white-space: normal;
        }
    </style>
    <div class="content">
        <div class="block block-rounded">
            <div class="block-header block-header-default">
                <h3 class="block-title">Planning des visites</h3>
            </div>
            <div class="block-content block-content-full">
                <button class="btn btn-dark mb-4 d-none" data-bs-toggle="modal" data-bs-target="#createVisitModal">
                    Programmer
                    une
                    visite
                </button>
                <div class="row text-white text-center my-3">
                    <label class="form-label text-black">État de visite</label>
                    <div class="row text-capitalize">
                        <span class="offset-1 col-2 bg-info"> En attente</span>
                        <span class="col-2 bg-success"> confirmée</span>
                        <span class="col-2 bg-primary"> clôturée</span>
                        <span class="col-2 bg-danger"> annulée</span>
                        <span class="col-2 bg-warning"> reportée</span>
                    </div>
                </div>
                <div id="calendar"></div>
            </div>
        </div>
    </div>

    {{-- Modal create visit --}}
    <div class="modal" tabindex="-1" id="createVisitModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Nouvelle visite</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{route("visits.store")}}" class="form create_visit_form">
                        <div class="form-group">
                            <label for="visit_date">Date de visite</label>
                            <input type="text" class="form-control" id="visit_date" name="visit_date">
                        </div>
                        <div class="form-group">
                            <label for="address">Adresse</label>
                            <input type="text" class="form-control" id="address" name="address">
                        </div>
                        <div class="form-group">
                            <div class="doctor_area">
                                <label for="doctor" class="form-label">Médecin</label>
                                <select id="doctor" name="doctor" class="form-control w-100">
                                    <option value="">Sélectionner un médecin</option>
                                    @foreach($doctors as $doctor)
                                        <option value="{{$doctor->id}}">{{$doctor->full_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="pack">Pack</label>
                            <select id="pack" name="pack" class="form-control w-100">
                                <option value="">Sélectionner un pack</option>
                                @foreach($packs as $pack)
                                    <option value="{{$pack->id}}">{{$pack->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <div class="product_area">
                                <label for="products">Produits</label>
                                <select name="products[]" id="products" class="form-control w-100" multiple>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                    <button type="button" class="btn btn-primary" id="create-visit">Valider</button>
                </div>
            </div>
        </div>
    </div>
@endsection