@extends('layouts.base')
@section('content')
<div class="layout-px-spacing">
    <div class="middle-content container-xxl p-0">
        <div class="d-flex align-items-center layout-top-spacing">
            <div>
                <a href="{{ route('beneficiaire.index')}}"><i class="fa fa-arrow-circle-left"></i> Bénéficiaires </a>
            </div>
        </div>

        <div class="d-flex align-items-center mb-3">
            <div>
                <h1 class="page-header mb-0">Bénéficiaire: <b>{{ $beneficiaire->RaisonSociale }}</b> </h1>
                <br>
                <p><b>Forme Juridique: </b>{{ $beneficiaire->forme_juridique->NomFormeJuridique }}</p>
            </div>

            <div class="ms-auto">
                <button type="button" class="btn btn-black fw-semibold fs-13px" data-bs-toggle="modal" data-bs-target="#modalLg"><i class="fa fa-plus fa-fw me-1"></i>Nouveau véhicule</button>

            </div>
        </div>


        <div class="row gx-4">
            <div class="col-xl-12">
                <div class="widget-content widget-content-area">
                    <table id="zero-config" class="table style-1 dt-table-hover non-hover table-responsive">
                        <thead>
                            <tr>
                                <th >Immat.</th>
                                <th >Marque</th>
                                <th>Modèle</th>
                                <th>Type</th>
                                <th>Couleur</th>
                                <th>Statut</th>
                                <th>Action</th>
                                <th>PDF</th>
                                <th>Edition</th>
                                <th>Supprimer</th>
                            </tr>
                        </thead>
                        <tbody>

                             <!-- beneficiaires -->
                             @foreach($vehicules as $vehicule)
                                <tr>
                                    <td class="align-middle">{{ $vehicule->Immatriculation}}</td>
                                    <td class="align-middle">{{ $vehicule->marqueVoiture->NomMarque}}</td>
                                    <td class="align-middle">{{ $vehicule->Model}}</td>
                                    <td class="align-middle">{{ $vehicule->type_vehicule->NomTypeVehicule}}</td>
                                    <td class="align-middle">{{ $vehicule->Couleur}}</td>
                                    <td class="align-middle">
                                        @if($vehicule->Statut == 0)
                                        <span class="badge badge-light-danger rounded fs-12px d-inline-flex align-items-center"><i class="fa fa-circle fs-9px fa-fw me-5px"></i>Désactivé</span>
                                        @else
                                        <span class="badge badge-light-success bg-opacity-15 px-2 py-6px rounded fs-12px d-inline-flex align-items-center"><i class="fa fa-circle fs-9px fa-fw me-5px"></i> Activé</span>
                                        @endif
                                    </td>
                                    <td class="align-middle">
                                        <form action="{{ route('change_vehicule_state', $vehicule->id) }}" method="GET" id="submit{{ $vehicule->id}}">
                                            @if($vehicule->Statut === 0)
                                                <button  type="button" data-original-title="Activer" data-toggle="tooltip" data-placement="top"
                                                onclick="changeAction('{{ $vehicule->id}}')" class="btn btn-success btn-sm">Activer</button>
                                            @else
                                                <button  type="button" data-original-title="Activer" data-toggle="tooltip" data-placement="top"
                                                onclick="changeAction('{{ $vehicule->id}}')" class="btn btn-danger btn-sm">Désactiver</button>
                                            @endif
                                        </form>
                                    </td>
                                    <td>
                                        @if($vehicule->info_pdf != null)
                                            <a  href="{{ $vehicule->pdf_url }}" target="_blank" class="table-inner-text">Voir pdf</a>
                                        @else
                                            -
                                        @endif
                                    </td>

                                    <td>
                                        <!-- Form Button trigger modal -->
                                        <a href="{{ route('vehicule.edition', [$vehicule->id, $beneficiaire->id]) }}" class="btn btn-primary btn-xs">
                                            <i class="fa fa-edit"></i>
                                        </a>
                                    </td>
                                    <td class="align-middle">
                                        <form method="POST" action="{{ route('vehicule.destroy', $vehicule->id) }}">
                                            @csrf
                                            <input type="hidden" name="beneficiaire_id" value="{{ $beneficiaire->id ?? '' }}">
                                            <input name="_method" type="hidden" value="DELETE">
                                            <button type="submit" class="btn btn-xs btn-default show_confirm" data-toggle="tooltip" title='Delete'><i class="fa fa-times-circle"></i></button>
                                        </form>
                                    </td>

                                </tr>
                                @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ajouter un vehicule -->
<div class="modal fade" id="modalLg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content bg-light">
            <div class="modal-header">
                <div class="modal-title fs-5">Ajouter un nouveau véhicule</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="FormValidationVehicule" action="{{ route('vehicule.store')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="beneficiaire_id" value="{{ $beneficiaire->id ?? '' }}">
                    <div class="mb-3 row">
                        <label for="Immatriculation" class="col-sm-4 col-form-label">Numero d'immatriculation *</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="Immatriculation" name="Immatriculation">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="marque_voiture_id" class="col-sm-4 col-form-label">Marque de la voiture *</label>
                        <div class="col-sm-8">
                            <select class="form-select" id="marque_voiture_id" name="marque_voiture_id" >
                                @foreach($marqueVehicules as $marqueVehicule)
                                <option value="{{ $marqueVehicule->id}}">{{ $marqueVehicule->NomMarque}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label for="Model" class="col-sm-4 col-form-label">Modèle de la voiture *</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="Model" name="Model" required>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="type_vehicule_id" class="col-sm-4 col-form-label">Type de la voiture *</label>
                        <div class="col-sm-8">
                            <select name="type_vehicule_id" id="type_vehicule_id" class="form-control">
                                @foreach($type_vehicules as $type_vehicule)
                                    <option value="{{ $type_vehicule->id }}">{{ $type_vehicule->NomTypeVehicule}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="Couleur" class="col-sm-4 col-form-label">Couleur de la voiture *</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="Couleur" name="Couleur">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="info_pdf" class="col-sm-2 col-form-label">Infos du vehicule (PDF)</label>
                        <div class="col-sm-10">
                            <input type="file" name="info_pdf" id="info_pdf" class="form-control">
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label for="Description" class="col-sm-4 col-form-label">Description</label>
                        <div class="col-sm-8">
                            <textarea type="text" name="Description" id="Description" class="form-control" cols="5" rows="4" value="{{ old('Description')}}"> </textarea>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-sm-8 mt-3">
                            <button type="submit" class="btn btn-dark ">Enregistrer la voiture</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
@endsection

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
<script src="{{asset('static/src/assets/js/jsPage/form-create-vehicule.js') }}"></script>
<script src="{{asset('static/src/assets/js/jsPage/form-create-beneficiaire.js') }}"></script>
<script type="text/javascript">
    $('.show_confirm').click(function(event) {
        var form = $(this).closest("form");
        var name = $(this).data("name");
        event.preventDefault();
        swal({
                title: `Etes-vous sûr de vouloir supprimer ?`,
                text: "Cette suppression est definitive de l'application",
                icon: "warning",
                buttons: true,
                buttons: ['Annuler', 'Confirmer'],
                dangerMode: true,
            })
            .then((willDelete) => {
                if (willDelete) {
                    form.submit();
                }
            });
    });
    //Action change state véhicule
    function changeAction(id) {
        let form = document.querySelector(`#submit${id}`);
        swal({
            title: 'Etes vous sur de vouloir changer ce status',
            text: 'cette action est irreversible',
            icon: 'warning',
            showCancelButton: true,
            buttons: ['Annuler', 'Oui, j\'en suis sur !'],
            dangerMode: true,

        }).then((result) => {
            if(result){
                form.submit();
            }
        })
    }
</script>
@endsection