@extends('layouts.master')

@push('css')

@endpush

@section('breadcrumb')
    @include('components.breadcrumb',['breadcrumbs' => [
        [
            'name'  => __("Dashboard"),
            'url'   => route("home"),
        ]
    ], 'active' => __(@$title)])
@endsection

@section('content')
    <div class="body-wrapper">
        <div class="row justify-content-center mb-30-none">
            <div class="col-xl-12 mb-30">
                <div class="dash-payment-item-wrapper">
                    <div class="dash-payment-item active">
                        <div class="dash-payment-title-area">
                            <span class="dash-payment-badge" onclick="toggleActive(event)">!</span>
                            <h5 class="title">Detail {{ @$title }}</h5>
                        </div>
                        <div class="dash-payment-body">
                            <form class="row" action="{{ route("ticketsclients.update",$ticketsclients) }}"
                                  method="post" enctype="multipart/form-data">
                                @csrf
                                @method("put")

                                @if(\Illuminate\Support\Facades\Auth::user()->pays_id ==null)
                                    <div class="col-sm-6" style="padding-bottom: 10px">
                                        <label for="pays_id" class="form-label">@lang("pays_id")<span
                                                style="color: red">*</span></label>
                                        <select required id="pays_id" name="pays_id" class="form-control select2">
                                            <option value=""> ---- Selectionner ----</option>
                                            @foreach ( $payss as $pays)
                                                <option value="{{$pays->id}}"
                                                        @if($ticketsclients->pays_id== $pays->id) selected @endif>{{$pays->libelle??""}} </option>
                                            @endforeach
                                        </select>
                                        @error("pays_id")
                                        <div class="invalid-feedback">{{$message}}</div> @enderror
                                    </div>
                                @endif


                                <div class="col-sm-6" style="padding-bottom: 10px">
                                    <label for="title" class="form-label">@lang("title")<span
                                            style="color: red">*</span></label>
                                    <input required type="text" id="title" name="title"
                                           class="form-control @error("title") is-invalid @enderror"
                                           value="{{ $ticketsclients->title }}">
                                    @error("title")
                                    <div class="invalid-feedback">{{$message}}</div> @enderror
                                </div>
                                <div class="col-sm-6" style="padding-bottom: 10px">
                                    <label for="typetickets_id" class="form-label">@lang("typetickets_id")<span
                                            style="color: red">*</span></label>
                                    <select required id="typetickets_id" name="typetickets_id"
                                            class="form-control select2">
                                        <option value=""> ---- Selectionner ----</option>
                                        @foreach ( $typeticketclients as $typeticketclient)
                                            <option value="{{$typeticketclient->id}}"
                                                    @if($ticketsclients->typetickets_id== $typeticketclient->id) selected @endif>{{$typeticketclient->libelle??""}} </option>
                                        @endforeach
                                    </select>
                                    @error("typetickets_id")
                                    <div class="invalid-feedback">{{$message}}</div> @enderror
                                </div>
                                <div class="col-sm-6" style="padding-bottom: 10px">
                                    <label for="numeroclient" class="form-label">@lang("numeroclient")<span
                                            style="color: red">*</span></label>
                                    <input disabled type="tel" id="numeroclient" name="numeroclient"
                                           class="form-control @error("numeroclient") is-invalid @enderror">
                                    @error("numeroclient")
                                    <div class="invalid-feedback">{{$message}}</div> @enderror
                                    <span style="color: red;font-size: 10px" id="client_error">Le client n'a pas été trouver</span>
                                </div>
                                <input type="hidden" id="client_id" name="client_id">
                                <div class="col-sm-6" style="padding-bottom: 10px">
                                    <label for="username" class="form-label">@lang("username")<span
                                            style="color: red">*</span></label>
                                    <input disabled type="text" id="username" name="username"
                                           class="form-control @error("username") is-invalid @enderror">
                                    @error("username")
                                    <div class="invalid-feedback">{{$message}}</div> @enderror
                                </div>
                                <div class="col-sm-12" style="padding-bottom: 10px">
                                    <label for="observation" class="form-label">@lang("observation")<span
                                            style="color: red">*</span></label>
                                    <textarea required type="text" rows="10" id="observation" name="observation"
                                              class="form-control @error("observation") is-invalid @enderror">{{$ticketsclients->observation??""}}</textarea>
                                    @error("observation")
                                    <div class="invalid-feedback">{{$message}}</div> @enderror
                                </div>
                                <div class="col-12 mt-3">
                                    <a href="{{ route("ticketsclients.index") }}"
                                       class="btn btn-danger">@lang("Annuler")</a>
                                    <button class="btn btn-primary" type="submit">@lang("Valider")</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(async function () {
            $("button").prop("disabled", true);
            $("#client_error").hide();

            // Fonction pour mettre à jour les champs lors de l'édition
            function updateFields(numeroclient, username, client_id) {
                $('#numeroclient').val(numeroclient);
                $('#username').val(username);
                $('#client_id').val(client_id);
                $("button").prop("disabled", false);
            }

            // Vérifier si des données existent pour pré-remplir les champs (en mode édition)
            let numeroclient = "{{ $numeroclient ?? '' }}";  // Assurez-vous de passer cette variable depuis votre contrôleur
            let username = "{{ $username ?? '' }}";  // Assurez-vous de passer cette variable depuis votre contrôleur
            let client_id = "{{ $client_id ?? '' }}";  // Assurez-vous de passer cette variable depuis votre contrôleur
            if (numeroclient && username && client_id) {
                updateFields(numeroclient, username, client_id);
            }

            $('#numeroclient').on('input', function () {

                if ($(this).val() != '') {
                    $('#username').val('');
                    var select = $(this).attr("id");
                    let numeroclient = $(this).val();
                    let pays_id = $("#pays_id").val();
                    var _token = $('input[name="_token"]').val();
                    $.ajax({
                        url: "{{ route('dynamicdependent.fetch.client.get.username') }}",
                        method: "POST",
                        data: {select: select, numeroclient: numeroclient, pays_id: pays_id, _token: _token},
                        success: function (result) {
                            if (result.id != undefined) {
                                $('#client_error').hide();
                                $('#username').val(result.nom + ' ' + result.prenoms);
                                $('#client_id').val(result.id);
                                $("button").prop("disabled", false);
                            } else {
                                $('#client_error').show();
                                $("button").prop("disabled", true);
                            }

                        }
                    })
                }
            })


        })
    </script>
@endsection