@extends('layouts.app', [
    'title' => __('User Management'),
    'parentSection' => 'laravel',
    'elementName' => 'user-management'
])
<meta name="csrf-token" content="{{ csrf_token() }}">
@section('title', 'Novo Trecho |')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

@section('content')
    @component('layouts.headers.auth')
        @component('layouts.headers.breadcrumbs')
            @slot('title')
               Novo Trecho
            @endslot

            <li class="breadcrumb-item"><a class="text-default" href="{{ route('sales.show', $sale_product->first()->sale_id) }}">Venda do cliente {{$sale_product->first()->first_name . " " . $sale_product->first()->last_name }}</a></li>
        @endcomponent
    @endcomponent
    <div class="container-fluid mt--6">
        <div class="row">
            <div class="col-xl-12 order-xl-1">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h6 class="modal-title" id="modal-title-default">Adicionar Trecho no Localizador {{ $sale_product->reservation_number }}</h6>
                            </div>
                            <div class="col-4 text-right">
                                <a href="{{ url()->previous() }}" class="btn btn-sm btn-primary">Voltar</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form action="{{route('flightlegs.store')}}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-4">
                                    <div class="form-group">
                                        <label class="form-control-label text-left" style="float:left"  for="input-name">Fornecedor</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon1"><i class="ni ni-briefcase-24"></i></span>
                                            </div>
                                            <input type="text" class="form-control" name="sale_id" hidden value="{{$sale_product->sale_id}}">
                                            <input type="text" class="form-control" name="provider_id" hidden value="{{$sale_product->provider_id}}">
                                            <input type="text" class="form-control" name="provider_name" readonly value="{{$sale_product->provider_name}}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group">
                                        <label class="form-control-label text-left" style="float:left"  for="input-name">Produto</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon1"><i class="ni ni-briefcase-24"></i></span>
                                            </div>
                                            <input type="text" class="form-control" name="saleproduct_id" hidden value="{{$sale_product->sp_id}}">
                                            <input type="text" class="form-control" name="product_id" hidden value="{{$sale_product->pid}}">
                                            <input type="text" class="form-control" name="product" readonly value="{{$sale_product->product}}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group">
                                        <label class="form-control-label text-left" style="float:left"  for="input-name">Prestador</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon1"><i class="ni ni-briefcase-24"></i></span>
                                            </div>
                                            <select name="supplier_id" id="supplier_id" value="{{old('supplier_id')}}" class="form-control" @error('supplier_id') is-invalid @enderror>
                                                <option value="{{$sale_product->supplier_id}}">{{$sale_product->supplier_name}}</option>
                                                @foreach ($suppliers->where('id', '!=', $sale_product->supplier_id) as $supplier)
                                                    <option value="{{$supplier->id}}">{{ $supplier->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Flights -->
                            <div id="flights">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group{{ $errors->has('pickup_locaL') ? ' has-danger' : '' }}">
                                            <label class="form-control-label text-left" style="float:left" for="basic-url"><i class="fa-solid fa-plane-circle-check"></i> De onde</label>
                                            <select name="pickup_local" id="pickup_locaL" value="{{old('pickup_locaL')}}" class="form-control select2" @error('pickup_locaL') is-invalid @enderror>
                                                <option value=""></option>
                                                    @foreach ($airports as $airport)
                                                        <option value="{{ $airport->id }}" title=" País-Estado: {{ ($airport->iso_region) }} | Cidade: {{ ($airport->municipality) }} | Nome do Aeroporto: {{ ($airport->name) }}" >{{ substr($airport->iso_country. " | ". $airport->iata_code . " | ". $airport->municipality . " | ". $airport->name, 0, 60) }}</option>
                                                    @endforeach
                                            </select>
                                        @include('alerts.feedback', ['field' => 'pickup_local_flight'])
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group{{ $errors->has('dropoff_local') ? ' has-danger' : '' }}">
                                            <label class="form-control-label text-left" style="float:left" for="basic-url"><i class="fa-solid fa-plane-circle-check"></i> Para onde</label>
                                            <select name="dropoff_local" id="dropoff_local" value="{{old('dropoff_local')}}" class="form-control select2" @error('dropoff_local') is-invalid @enderror>
                                                <option value=""></option>
                                                    @foreach ($airports as $airport)
                                                        <option value="{{ $airport->id }}" title=" País-Estado: {{ ($airport->iso_region) }} | Cidade: {{ ($airport->municipality) }} | Nome do Aeroporto: {{ ($airport->name) }}">{{ substr($airport->iso_country. " | ". $airport->iata_code . " | ". $airport->municipality . " | ". $airport->name, 0, 60) }}</option>
                                                    @endforeach
                                            </select>
                                        @include('alerts.feedback', ['field' => 'pickup_local_flight'])
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group">
                                        <label class="form-control-label text-left" style="float:left" for="basic-url">Partida</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1"><i class="ni ni-calendar-grid-58"></i></span>
                                                </div>
                                                <input type="text" class="form-control" value="{{$sale_product->sale_id}}" name="sale_id" hidden>
                                                <input type="datetime-local" class="form-control" name="start_datetime" id="start_datetime" value="{{ old('start_datetime') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                        <label class="form-control-label text-left" style="float:left" for="basic-url">Chegada</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1"><i class="ni ni-calendar-grid-58"></i></span>
                                                </div>
                                                <input type="datetime-local" class="form-control" name="end_datetime" id="end_datetime" value="{{ old('end_datetime') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label class="form-control-label text-left" style="float:left"  for="input-name">Destino</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1"><i class="fa-solid fa-map-location"></i></span>
                                                </div>
                                                <select name="destiny" id="destiny" value="{{old('destiny')}}" required class="form-control" @error('destiny') is-invalid @enderror>
                                                    <option value=""> -- Selecione --</option>
                                                    <option value="Nacional">Nacional</option>
                                                    <option value="Internacional">Internacional</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-group">
                                        <label class="form-control-label text-left" style="float:left" for="basic-url">Localizador</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1"><i class="fa-solid fa-arrow-up-1-9"></i></span>
                                                </div>
                                                <input type="text" class="form-control" name="reservation_number" required id="reservation_number" readonly value="{{ $sale_product->reservation_number }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                        <label class="form-control-label text-left" style="float:left" for="basic-url">Nº do Voo</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1"><i class="fa-solid fa-plane-lock"></i></span>
                                                </div>
                                                <input type="text" class="form-control" name="flight_number" required value="{{ old('flight_number') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                        <label class="form-control-label text-left" style="float:left" for="basic-url">Classe</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1"><i class="fa-solid fa-address-card"></i></span>
                                                </div>
                                                <select name="category" class="form-control" required id="category">
                                                    <option value="" selected>-- Selecione --</option>
                                                    <option value="Econômica">Econômica</option>
                                                    <option value="Executiva">Executiva</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group">
                                        <label class="form-control-label text-left" style="float:left" for="basic-included_services">Serviços Inclusos</label>
                                            <textarea name="included_services" id="included_services" rows="4" resize="none" class="form-control{{ $errors->has('included_services') ? ' is-invalid' : '' }}" placeholder="Serviços Inclusos" value="{{ old('included_services') }}"></textarea>
                                            @include('alerts.feedback', ['field' => 'included_services'])
                                        </div>
                                    </div>
                                </div>
                                <input type="text" class="form-control" name="country" id="country" hidden>
                                <input type="text" class="form-control" name="state_city" id="state_city"hidden >
                                <input type="text" class="form-control" name="lat" id="lat" hidden>
                                <input type="text" class="form-control" name="long" id="long" hidden>
                            </div>
                    </div>
                            <div class="card-footer text-right" style="float: right;">
                                <button type="submit" class="btn btn-success btn-sm">Cadastrar</button>
                            </div>
                        </form>
                                </div>
                            </div>
                        </div>
                        @include('layouts.footers.auth')
                    </div>
@endsection
@push('js')
<!-- Get Products  -->
{{-- Provider Filter Product --}}
<script>
    $('#provider_id').on('change',function(){
        let id = $("#provider_id").val();
        $.ajax({
            type: 'PATCH',
            url: "{{ route('getproducts', '') }}" + "/" + id,
            success: function(response) {
                var response = JSON.parse(response);
                $('#product_id').empty();
                $('#product_id').append('<option value=""></option>');
                response.forEach(element => {
                    $('#product_id').append(`<option value="${element['id']}">${element["title"]}</option>`);
                });
            }
        });
    });
</script>
<!-- Get Conditional Fields -->
<script>
    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
    });
    $(function(){
        $("#product_id").change(function(){
            var product = $("#product_id option:selected").text();
            console.log(product);
            if (product == "Aéreo") {
                $('#flights').show();
                $('#accommodation').hide();
                $('#insurance').hide();
                $('#carRental').hide();
                $('#others').hide();
            } else if (product == "Hospedagem"){
                $('#accommodation').show();
                $('#flights').hide();
                $('#insurance').hide();
                $('#carRental').hide();
                $('#others').hide();
            } else if (product == "Seguro Viagem") {
                $('#insurance').show();
                $('#accommodation').hide();
                $('#flights').hide();
                $('#carRental').hide();
                $('#others').hide();
            } else if (product == "Locação de Veículo") {
                $('#carRental').show();
                $('#accommodation').hide();
                $('#flights').hide();
                $('#insurance').hide();
                $('#others').hide();
            } else if (product == "Outros") {
                $('#others').show();
                $('#carRental').hide();
                $('#accommodation').hide();
                $('#flights').hide();
                $('#insurance').hide();
            } else {
                $('#others').show();
                $('#carRental').hide();
                $('#accommodation').hide();
                $('#flights').hide();
                $('#insurance').hide();
            }

        });
    })
</script>
<!-- Select2 With Search -->
<script>
    $(document).ready(function() {
    $('.select2').select2({});
});
</script>
<!-- Pickup and Dropoff Locals Flights -->
<script>
    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
    });
    $('#dropoff_local').on('change',function(){
        let id2 = $('#dropoff_local').val();
        console.log(id2);
        $.ajax({
            type: 'PATCH',
            url: "{{ route('getcountry2', '') }}" + "/" + id2,
            success: function(response) {
                var response = JSON.parse(response);
                console.log(response);
                $('#country').empty();
                $('#state_city').empty();
                $('#lat').empty();
                $('#long').empty();
                $('#country').val(`${response['country']}`);
                $('#state_city').val(`${response['municipality']}`);
                $('#lat').val(`${response['lat']}`);
                $('#long').val(`${response['long']}`);
            }
        })
    });
    // $('#state_city_accommodation').on('change',function(){
    //     let id3 = $('#state_city_accommodation').val();
    //     console.log(id3);
    //     $.ajax({
    //         type: 'PATCH',
    //         url: "{{ route('getcities', '') }}" + "/" + id3,
    //         success: function(response) {
    //             var response = JSON.parse(response);
    //             console.log(response);
    //             $('#lat_dropoffaccommodation').empty();
    //             $('#long_dropoffaccommodation').empty();
    //             $('#lat_dropoffaccommodation').val(`${response['lat']}`);
    //             $('#long_dropoffaccommodation').val(`${response['long']}`);
    //         }
    //     })
    // });
</script>
{{-- Country Filter Cities --}}
<script>
    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
    });
    // Accommodation
    $('#country_accommodation').on('change',function(){
        let id = $("#country_accommodation").val();
        console.log(id);
        $.ajax({
            type: 'PATCH',
            url: "{{ route('getcities', '') }}" + "/" + id,
            success: function(response) {
                var response = JSON.parse(response);
                console.log(response);
                $('#lat_dropoffaccommodation').val("");
                $('#long_dropoffaccommodation').val("");
                $('#state_city_accommodation').empty();
                $('#state_city_accommodation').append(`<option value=""></option>`);
                response.forEach(element => {
                    $('#state_city_accommodation').append(`<option value="${element['city_ascii']}">${element['admin_name']} | ${element["city_ascii"]}</option>`);
                });
            }
        });
    });
    $('#state_city_accommodation').on('change',function(){
        let id = $("#state_city_accommodation").val();
        console.log(id);
        $.ajax({
            type: 'PATCH',
            url: "{{ route('getposition', '') }}" + "/" + id,
            success: function(response) {
                var response = JSON.parse(response);
                console.log(response);
                $('#lat_dropoffaccommodation').val("");
                $('#long_dropoffaccommodation').val("");
                $('#lat_dropoffaccommodation').val(`${response['latitude']}`);
                $('#long_dropoffaccommodation').val(`${response['longitude']}`);
            }
        });
    });
    // Insurance
    $('#country_insurance').on('change',function(){
        let id = $("#country_insurance").val();
        console.log(id);
        $.ajax({
            type: 'PATCH',
            url: "{{ route('getcities', '') }}" + "/" + id,
            success: function(response) {
                var response = JSON.parse(response);
                console.log(response);
                $('#lat_dropoff_insurance').val("");
                $('#long_dropoff_insurance').val("");
                $('#state_city_insurance').empty();
                $('#state_city_insurance').append(`<option value=""></option>`);
                response.forEach(element => {
                    $('#state_city_insurance').append(`<option value="${element['city_ascii']}">${element['admin_name']} | ${element["city_ascii"]}</option>`);
                });
            }
        });
    });
    $('#state_city_insurance').on('change',function(){
        let id = $("#state_city_insurance").val();
        console.log(id);
        $.ajax({
            type: 'PATCH',
            url: "{{ route('getposition', '') }}" + "/" + id,
            success: function(response) {
                var response = JSON.parse(response);
                console.log(response);
                $('#lat_dropoff_insurance').val("");
                $('#long_dropoff_insurance').val("");
                $('#lat_dropoff_insurance').val(`${response['latitude']}`);
                $('#long_dropoff_insurance').val(`${response['longitude']}`);
            }
        });
    });
    // Car Rental
    $('#country_carRental').on('change',function(){
        let id = $("#country_carRental").val();
        console.log(id);
        $.ajax({
            type: 'PATCH',
            url: "{{ route('getcities', '') }}" + "/" + id,
            success: function(response) {
                var response = JSON.parse(response);
                console.log(response);
                $('#lat_dropoff_carRental').val("");
                $('#long_dropoff_carRental').val("");
                $('#state_city_carRental').empty();
                $('#state_city_carRental').append(`<option value=""></option>`);
                response.forEach(element => {
                    $('#state_city_carRental').append(`<option value="${element['city_ascii']}">${element['admin_name']} | ${element["city_ascii"]}</option>`);
                });
            }
        });
    });
    $('#state_city_carRental').on('change',function(){
        let id = $("#state_city_carRental").val();
        console.log(id);
        $.ajax({
            type: 'PATCH',
            url: "{{ route('getposition', '') }}" + "/" + id,
            success: function(response) {
                var response = JSON.parse(response);
                console.log(response);
                $('#lat_dropoff_carRental').val("");
                $('#long_dropoff_carRental').val("");
                $('#lat_dropoff_carRental').val(`${response['latitude']}`);
                $('#long_dropoff_carRental').val(`${response['longitude']}`);
            }
        });
    });
    // Others
    $('#country_others').on('change',function(){
        let id = $("#country_others").val();
        console.log(id);
        $.ajax({
            type: 'PATCH',
            url: "{{ route('getcities', '') }}" + "/" + id,
            success: function(response) {
                var response = JSON.parse(response);
                console.log(response);
                $('#lat_dropoff_others').val("");
                $('#long_dropoff_others').val("");
                $('#state_city_others').empty();
                $('#state_city_others').append(`<option value=""></option>`);
                response.forEach(element => {
                    $('#state_city_others').append(`<option value="${element['city_ascii']}">${element['admin_name']} | ${element["city_ascii"]}</option>`);
                });
            }
        });
    });
    $('#state_city_others').on('change',function(){
        let id = $("#state_city_others").val();
        console.log(id);
        $.ajax({
            type: 'PATCH',
            url: "{{ route('getposition', '') }}" + "/" + id,
            success: function(response) {
                var response = JSON.parse(response);
                console.log(response);
                $('#lat_dropoff_others').val("");
                $('#long_dropoff_others').val("");
                $('#lat_dropoff_others').val(`${response['latitude']}`);
                $('#long_dropoff_others').val(`${response['longitude']}`);
            }
        });
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@endpush
@push('css')
<link rel="stylesheet" href="{{ asset('argon/vendor/select2/dist/css/select2.min.css') }}">
<style>
    .select2-single-selection__rendered{
    word-wrap: break-word !important;
    text-overflow: inherit !important;
    white-space: normal !important;
    }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css">
@endpush