@extends('../partials.model')

@section('content')

<div class="container-fluid">

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center my-4 justify-content-between page-header-breadcrumb">
        <div>
            <h1 class="text-3xl font-bold text-slate-900">
                Gestion des lots
            </h1>
            <p class="text-slate-600 mtw-1">
                Gérer tous vos lots en toute simplicité
            </p>
        </div>
        <div class="ms-md-1 ms-0">
            <nav>
                <button class="btn btn-primary" id="Ajout-nouveau-lot" data-bs-toggle="modal" data-bs-target="#lotModal">
                    <i class="bi bi-plus-circle btn-icon-size"></i>
                    Nouveau lot
                </button>
            </nav>
        </div>
    </div> 
    <!-- Page Header Close -->

        <div class="row g-3">
            <!-- En attente -->
            <div class="col-md-4">
                <div class="card card-border">
                    <div class="card-body d-flex">
                        <i class="bi bi-clock text-warning fs-30 mt-2"></i>
                        <div>
                            <p class="stat-value mb-0 fw-bold ms-2 fs-20" id="stat-encours">0</p>
                            <p class="stat-label mb-0 ms-2">DISPONIBLE</p>
                        </div>
                    </div>
                </div>
            </div>

                  <!-- Rejetées -->
            <div class="col-md-4">
                <div class="card card-border">
                    <div class="card-body d-flex">
                        <i class="bi bi-x-circle text-danger fs-30 mt-2"></i>
                        <div>
                            <p class="stat-value mb-0 fw-bold ms-2 fs-20" id="stat-annule">0</p>
                            <p class="stat-label mb-0 ms-2">VENDU</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Approuvées -->
            <div class="col-md-4">
                {{-- <div class="card card-border">
                    <div class="card-body d-flex">
                        <i class="bi bi-check-circle text-success fs-30 mt-2"></i>
                        <div>
                            <p class="stat-value mb-0 fw-bold ms-2 fs-20" id="stat-termine">0</p>
                            <p class="stat-label mb-0 ms-2">TERMINE</p> 
                    </div>
                </div> --}}
            </div>
        </div>

    <!-- Start::row-1 -->
    <div class="card card-border">
        <div class="card-body">
            
            <div class="table-responsive">
                <table class="table table-striped table-hover" id="lotTable">
                    <thead>
                        <th >#</th>
                        <th class="text-center">Projet</th>
                        <th class="text-center">Reférence Ilot</th>
                        <th class="text-center">Reférence lot</th>
                        <th class="text-center">N° lot</th>
                        <th class="text-center">Superficie</th>
                        <th class="text-center">Statut</th>
                        <th class="text-center">Longitude</th>
                        <th class="text-center">Latitude</th>
                        <th class="text-center">Prix de revient</th>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!--End::row-1 -->


    <!-- Modal -->
    <div class="modal fade" id="lotModal" tabindex="-1" aria-labelledby="lotModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="lotModalLabel">Nouveau lot</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="lot_form">
                        @csrf
                        <input type="hidden" id="id_hidden_lot" name="id_hidden_lot" value="0" />
                        <div class="row">

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Projet* :</div>
                                <select class="form-select" id="projet_ilot">
                                </select>
                            </div>

                            <div class="col-xl-12  mb-1">
                                <div class="lib">Ilot* :</div>
                                <select class="form-select" id="ilot-select" name="ilot_select">
                                </select>
                            </div>

                           
                            <div class="col-xl-6 mb-1">
                                <div class="lib">Numéro lot* :</div>
                                <input type="text" class="form-control" name="num_lot_custom_no_multiple" id="num_lot_custom_no_multiple" placeholder="Numéro lot" />
                            </div>
                            <div class="col-xl-6 mb-1">
                                <div class="lib">Superficie lot :</div>
                                <input type="text" class="form-control" name="superficie_lot" id="superficie_lot" placeholder="Superficie lot" />
                            </div>

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Prix de vente* :</div>
                                <input type="number" class="form-control" name="prix_vente_lot" id="prix_vente_lot" placeholder="Prix de vente" />
                            </div>

                            <div class="col-xl-6 mb-1">
                                <div class="lib">Longitude lot :</div>
                                <input type="text" class="form-control" name="longitude_lot" id="longitude_lot" placeholder="Longitude lot" />
                            </div>

                            <div class="col-xl-6 mb-1">
                                <div class="lib">Latitude lot :</div>
                                <input type="text" class="form-control" name="latitude_lot" id="latitude_lot" placeholder="Latitude lot" />
                            </div>

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Satut :</div>
                                <select id="statut_lot" name="statut_lot" class="form-select">
                                    <option selected value="1">DISPONIBLE</option>
                                    <option disabled value="2">VENDU</option>

                                </select>
                            </div>

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Description :</div>
                                <textarea class="form-control" name="description_lot" id="description_lot" placeholder="Description lot"></textarea>
                            </div>

                            <div class="col-xl-12 mb-1" id="block-multiple-insertion">
                                <div class="card card-border mt-2">
                                    <div class="card-body">
                                        <div class="row g-2">

                                            <div class="col-xl-4">
                                                <div class="form-check form-switch form-check-reverse">
                                                    <input class="form-check-input" type="checkbox" id="checkMultipleLot">
                                                    <label class="form-check-label" for="checkMultipleLot">Ajout multiple</label>
                                                </div>
                                            </div>

                                            <div class="col-xl-5">
                                                <input type="number" style="display:none" class="form-control text-center inputMultiple" name="multiple_insertion" value="2" id="inputMultiple" placeholder="Nombre" />
                                            </div>
                                            <div class="col-xl-3">
                                                <input type="number" style="display:none" class="form-control text-center inputMultiple" name="multiple_insertion_numero_lot" value="0" id="inputMultipleNumerolot" placeholder="Nombre" />
                                            </div>
                                        </div>
                                        <p class="inputMultiple" style="display:none;font-size:12px;color:#6c757d;margin-top:10px;">
                                            <i class="bi bi-info-circle-fill"></i>
                                            En cochant cette case, vous ajouter plusieurs lots avec les mêmes informations en une seule fois en spécifiant le nombre de lots à créer.
                                        </p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
                    <button type="button" class="btn btn-primary" id="save_lot">Enregistrer</button>
                </div>
            </div>
        </div>
    </div>
</div>



@endsection

@section('script')

<script>
    $(document).ready(function() {
        recuperation_lot()
        remplirSelect2('{{ route("projet.get") }}', null, '#projet_ilot', 'id_projet', 'nom_projet', '#lotModal', 'TOUS')

        $('#projet_ilot').on('change', function() {
            var id = $(this).val()
            remplirSelect2('{{ route("ilot.get") }}', {
                id_projet: id
            }, '#ilot-select', 'id_ilot', 'numero_ilot', '#lotModal', 'TOUS')
        })

        $('#lot_form').on('submit', function(e) {

            e.preventDefault();

            $.ajax({
                type: "POST"
                , url: "{{ route('lot.store') }}"
                , data: new FormData(this)
                , dataType: "JSON"
                , contentType: false
                , processData: false,
                 beforeSend:function(){

                    if($('#projet_ilot').val().length == 0){
                         notify_error('Veuillez choisir un projet svp !')
                        return false
                    }

                    if ($('#checkMultipleLot').is(':checked') == false) {
                        if ($('#num_lot_custom_no_multiple').val().length == 0) {
                            notify_error('Champ obligatoire')
                            $('#num_lot_custom_no_multiple').focus()
                            return false
                        }

                    }

                   if($('#ilot-select').val().length == 0){
                         notify_error('Veuillez choisir un ilot svp !')
                        return false
                   }

                    if($('#prix_vente_lot').val().length == 0){
                         notify_error('Champ obligatoire')
                         $('#prix_vente_lot').focus()
                        return false
                   }
                }
                , success: function(resp) {

                    notif('success', 'Succès', resp.msg)
                    recuperation_lot()
                    $('#lotModal').modal('hide')
                }
                , error: function(error) {
                    //error
                }
            });
        })

        $('#save_lot').on('click', function() {
            $('#lot_form').submit()
        })

        $(document).on('click', '#modification_ligne_lot', function() {
            var id = $(this).data('id')
            $.ajax({
                type: "GET"
                , url: "{{ route('lot_full.get') }}"
                , data: {
                    id: id
                }
                , dataType: "JSON"
                , success: function(resp) {
                    activerOptions()

                    $('#projet_ilot').val(resp.data[0].id_projet).trigger('change')
                    setTimeout(function() {
                        $('#ilot-select').val(resp.data[0].id_ilot).trigger('change');
                    }, 500);
                    
                    $('#ilot_lot').val(resp.data[0].num_ilot)
                    $('#id_hidden_lot').val(resp.data[0].id_lot)
                    $('#numero_lot').val(resp.data[0].numero_lot)
                    $('#superficie_lot').val(resp.data[0].superficie)
                    $('#latitude_lot').val(resp.data[0].latitude_lot)
                    $('#longitude_lot').val(resp.data[0].longitude_lot)
                    $('#prix_vente_lot').val(resp.data[0].prix_vente_lot)
                    $('#statut_lot').val(resp.data[0].statut_lot).trigger('change')
                    $('#description_lot').val(resp.data[0].description_lot)
                    $('#id_hidden_lot').val(resp.data[0].id_lot)
                    $('#block-multiple-insertion').css('display', 'none')
                    $('#lotModal').modal('show')
                }
                , error: function(error) {
                    //error
                }
            });
        })


        $(document).on('click', '#suppression_ligne_lot', function() {
            var id = $(this).data('id')
            sweet_alert(callback = function() {
                useAjaxPromise('DELETE', "{{ route('lot.delete') }}", {
                        id: id
                        , _token: '{{ csrf_token() }}'
                    })
                    .then(resp => {
                        notif('success', 'Succès', resp.msg);
                        recuperation_lot()
                    })
                    .catch(err => {
                        console.error("Erreur :", err);
                    });
            })
        })

         $(document).on('click','#voir_doc_associe',function(){
           
            var id = $(this).data('id')
             $('#check_btn_addocument').val(id)
            useAjaxPromise('GET',"{{ route('document.get') }}",{id:id })
             .then(resp => {

                if(resp.data.length == 0){

                   //notif('info', 'Info', 'Aucun document associé pour ce client.');
                    refreshDocumentTable(null,null,'documentLotTable');
                    //$('.check_btn_addocument').val(0)
                   // refreshDocumentTable(resp.data,true);
                    $('#DocumentModal').modal('show');
                    return;
                }

                //$('.check_btn_addocument').val(resp.data[0].id_document)
                $('#doc_type').val(resp.data[0].type_document);

                refreshDocumentTable(resp.data,true);
                $('#DocumentModal').modal('show');
            })
            .catch(err => {
                console.error("Erreur :", err);
            });
        });

        $('#checkMultipleLot').on('change', function() {
            if ($(this).is(':checked')) {
                // Si la case est cochée, afficher le champ nombre
                $('.inputMultiple').css('display', 'block');
            } else {
                // Si la case n'est pas cochée, masquer le champ nombre
                $('.inputMultiple').css('display', 'none');
            }
        });

        $('#Ajout-nouveau-lot').on('click', function () {
            $('#block-multiple-insertion').css('display', 'block');
        });


    })

    function recuperation_lot($id) {
        $.ajax({
            type: "GET"
            , url: "{{ route('lot_full.get') }}"
            , data: {
                id: $id
            }
            , dataType: "JSON"
            , success: function(resp) {

                var table = $('#lotTable').DataTable();
                table.clear()

                statut = '';
                var nbreStat_encours = 0;
                var nbreStat_termine = 0;
                var nbreStat_annule = 0;

                $.each(resp.data, function(key, value) {

                    if (value.statut_lot == 1) {
                        nbreStat_encours++;
                        statut = '<span class="badge bg-success" style="width:120px">Disponible</span>';
                    } else {
                        nbreStat_annule++
                        statut = '<span class="badge bg-danger"  style="width:120px">Non disponible</span>';
                    }

                    table.row.add([
                        
                        renderActions(value.id_lot, null, 'modification_ligne_lot', 'suppression_ligne_lot',null,'voir_doc_associe')
                        , value.nom_projet
                        , value.numero_ilot
                        , value.numero_lot,
                          value.numero_lot_custom
                        , value.superficie ? value.superficie + ' m²' : ''
                        , statut
                        , value.longitude_lot
                        , value.latitude_lot
                        , formatNumber(value.prix_vente_lot)
                    ])
                })

                table.draw();

                $('#stat-encours').text(nbreStat_encours)
                $('#stat-termine').text(nbreStat_termine)
                $('#stat-annule').text(nbreStat_annule)
            }
            , error: function(error) {
                //error
            }
        });
    }

    function activerOptions() {
        const select = document.getElementById('statut_lot');
        for (let i = 1; i < select.options.length; i++) {
            select.options[i].disabled = false;
        }
    }

</script>
@endsection