@extends('layouts/contentLayoutMaster')

@section('title', __('locale.Billing'));

@section('content')

@section('vendor-style')
    <!-- vendor css files -->
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/wizard/bs-stepper.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
@endsection

@section('page-style')
    <!-- Page css files -->
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-wizard.css')) }}">
@endsection

<section id="multiple-column-form">
    <div class="row">
        <div class="col-12">
            <form class="form-add-billing">
                @csrf
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{ __('locale.Table.Billing.Label.Title') }}</h4>
                        <div class="btn-group">
                            <a href="{{ route('dashboard.billing.edit', ['id' => $billing->id]) }}" class="btn btn-primary" id="btnEditar"><i data-feather='edit-3'></i></a>
                            <a href="{{ route('dashboard.billing.show', ['id' => $billing->id]) }}" class="btn btn-info" id="btnVisualizar">
                                <i data-feather="eye"></i>
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <input type="text" class="hidden" id="billing_id" value="{{$billing->id}}">
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="contract_id">{{ __('locale.Table.Billing.Label.Contract') }}</label>
                                    <select class="form-select" name="contract_id" id="contract_id" required>
                                        <option value="" disabled selected>Selecione um contrato</option>
                                        @if ($contracts)
                                        @foreach ($contracts as $contract)
                                        <option value="{{ $contract->id }}" {{$billing->contract_id == $contract->id ? 'selected' : ''}}>Contrato #{{ $contract->id }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="invoice_number">{{ __('locale.Table.Billing.Label.Invoice number') }}</label>
                                    <input type="text" id="invoice_number" class="form-control" autocomplete="off" placeholder="{{ __('locale.Table.Billing.Label.Invoice number') }}"
                                    value="{{ $billing->invoice_number }}" name="invoice_number" required/>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="issue_date">{{ __('locale.Table.Billing.Label.Issue Date') }}</label>
                                    <input type="date" id="issue_date"  class="form-control" autocomplete="off" placeholder="{{ __('locale.Table.Billing.Label.Issue Date') }}"
                                    value="{{ $billing->issue_date }}" name="issue_date" required/>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="expiration_date">{{ __('locale.Table.Billing.Label.Expiration Date') }}</label>
                                    <input type="date" id="expiration_date" class="form-control" autocomplete="off" placeholder="{{ __('locale.Table.Billing.Label.Expiration Date') }}"
                                    value="{{ $billing->expiration_date }}" name="expiration_date" required/>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="bill_value">{{ __('locale.Table.Billing.Label.Invoice value') }}</label>
                                    <input type="text" id="bill_value"  class="form-control campo_preco" autocomplete="off" placeholder="{{ __('locale.Table.Billing.Label.Invoice value') }}"
                                    value="{{ $billing->bill_value }}" name="bill_value" required/>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="competence">{{ __('locale.Table.Billing.Label.Competition') }}</label>
                                    <select class="form-select" name="competence" id="competence" required>
                                        <option value="" disabled selected>selecione um competência</option>
                                        <option value="1" {{$billing->competence == 1 ? 'selected' : ''}}>{{ __('locale.Table.Billing.Value.January') }}</option>
                                        <option value="2" {{$billing->competence == 2 ? 'selected' : ''}}>{{ __('locale.Table.Billing.Value.February') }}</option>
                                        <option value="3" {{$billing->competence == 3 ? 'selected' : ''}}>{{ __('locale.Table.Billing.Value.March') }}</option>
                                        <option value="4" {{$billing->competence == 4 ? 'selected' : ''}}>{{ __('locale.Table.Billing.Value.April') }}</option>
                                        <option value="5" {{$billing->competence == 5 ? 'selected' : ''}}>{{ __('locale.Table.Billing.Value.May') }}</option>
                                        <option value="6" {{$billing->competence == 6 ? 'selected' : ''}}>{{ __('locale.Table.Billing.Value.June') }}</option>
                                        <option value="7" {{$billing->competence == 7 ? 'selected' : ''}}>{{ __('locale.Table.Billing.Value.July') }}</option>
                                        <option value="8" {{$billing->competence == 8 ? 'selected' : ''}}>{{ __('locale.Table.Billing.Value.August') }}</option>
                                        <option value="9" {{$billing->competence == 9 ? 'selected' : ''}}>{{ __('locale.Table.Billing.Value.September') }}</option>
                                        <option value="10" {{$billing->competence == 10 ? 'selected' : ''}}>{{ __('locale.Table.Billing.Value.October') }}</option>
                                        <option value="11" {{$billing->competence == 11 ? 'selected' : ''}}>{{ __('locale.Table.Billing.Value.November') }}</option>
                                        <option value="12" {{$billing->competence == 12 ? 'selected' : ''}}>{{ __('locale.Table.Billing.Value.December') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="payment_date">{{ __('locale.Table.Billing.Label.Date of payment') }}</label>
                                    <input type="date" id="payment_date"  class="form-control" autocomplete="off" placeholder="{{ __('locale.Table.Billing.Label.Date of payment') }}"
                                    value="{{ $billing->payment_date }}" name="payment_date" required/>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="payment_value">{{ __('locale.Table.Billing.Label.Payment amount') }}</label>
                                    <input type="text" id="payment_value"  class="form-control campo_preco" autocomplete="off" placeholder="{{ __('locale.Table.Billing.Label.Payment amount') }}"
                                    value="{{ $billing->payment_value }}" name="payment_value" required/>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="file_down_date">{{ __('locale.Table.Billing.Label.Date the file was removed') }}</label>
                                    <input type="date" id="file_down_date"  class="form-control" autocomplete="off" placeholder="{{ __('locale.Table.Billing.Label.Date the file was removed') }}"
                                    value="{{ $billing->file_down_date }}" name="file_down_date" required/>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="bill_send_date">{{ __('locale.Table.Billing.Label.Date Invoice Sent') }}</label>
                                    <input type="date" id="bill_send_date"  class="form-control" autocomplete="off" placeholder="{{ __('locale.Table.Billing.Label.Date Invoice Sent') }}"
                                    value="{{ $billing->bill_send_date }}" name="bill_send_date" required/>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="billing_status_id">{{ __('locale.Table.Billing.Label.Status') }}</label>
                                    <select class="form-select" name="billing_status_id" id="billing_status_id" required>
                                        <option value="" disabled selected>Selecione um status</option>
                                        @if ($status)
                                        @foreach ($status as $status)
                                        <option value="{{ $status->id }}" {{$billing->contract_id == $status->id ? 'selected' : ''}}>{{ $status->name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-1">
                                    <div class="form-group">
                                        <label for="ticket">{{ __('locale.Table.Billing.Label.Ticket') }}</label>
                                        <input type="file" name="ticket[]"
                                            id="ticket" class="form-control" multiple>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-1">
                                    <div class="form-group">
                                        <label for="list_documents">{{ __('locale.Table.Billing.Label.Documents') }}</label>
                                        <input type="file" name="list_documents[]"
                                            id="list_documents" class="form-control" multiple>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="ticket_list">

                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="document_list">

                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-1">
                                    <div class="form-group">
                                        <label for="observation">{{ __('locale.Table.Billing.Label.Observation') }}</label>
                                        <textarea placeholder="{{ __('locale.Table.Billing.Label.Observation') }}" class="form-control"
                                        name="observation" id="observation" cols="30" rows="10">{{ $billing->observation }}"</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="row">    
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary me-1" id="btnAddBrokers">{{ __('locale.Table.parameter.Column.AddButton') }}</button>
                                <button type="reset" class="btn btn-outline-secondary" id="btnReset">{{ __('locale.Table.parameter.Column.BackButton') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection
@section('vendor-script')
<!-- vendor files -->
<script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/wizard/bs-stepper.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/jquery-mask/jquery.mask.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
@endsection
@section('page-script')
<script>
    let docs = [];
    let doc_tickets = [];
    $(function() {
        'use strict';

        // $(".form-add-parameter").validate({
        //     rules: {
        //         name: 'required',
               
               
        //     },
        //     messages: {
        //         name: "{{ __('locale.Table.parameter.Column.RequiredField') }}",
        //         cnpj: "{{ __('locale.Table.parameter.Column.RequiredField') }}",
        //         susep: "{{ __('locale.Table.parameter.Column.RequiredField') }}",
        //         company_id: "{{ __('locale.Table.parameter.Column.RequiredField') }}",
        //     }
        // });

        let billing_id = $('#billing_id').val();

        axios.get(`{{ route('api.billings.getDocuments', '') }}/${billing_id}`, {
            headers: {
                "Authorization": "Bearer {{ session('Authorization') }}"
            }
        })
        .then(function(response) {
            var documents = response.data;
            var $documentListDiv = $('.document_list');

            $documentListDiv.empty();

            var title = $('<h4></h4>').text('Documentos').addClass('mb-1');
            $documentListDiv.append(title);

            $.each(documents, function(index, document) {
                
                var link = $('<a></a>')
                    .attr('href', '/storage/' + document.filepath)
                    .text(document.filename)
                    .attr('target', '_blank')
                    .addClass('mb-1')
                    .attr('data-id', document.id); 

                var icon = $('<span></span>')
                    .addClass('icon-hide') 
                    .html('&#x1F5D1;')
                    .css('cursor', 'pointer')
                    .on('click', function() {
                        
                        let documentId = link.data('id');
                        docs.push(documentId);

                        link.add(icon).hide();
                    });

                var itemDiv = $('<div></div>').addClass('mb-1');
                itemDiv.append(link).append(' ').append(icon);
                $documentListDiv.append(itemDiv);

                $documentListDiv.append('<br>');
        })
        })
        .catch(function(error) {
            console.error('Erro na requisição:', error);
        });

        axios.get(`{{ route('api.billings.getTicket', '') }}/${billing_id}`, {
            headers: {
                "Authorization": "Bearer {{ session('Authorization') }}"
            }
        })
        .then(function(response) {
            var documents = response.data;
            var $documentListDiv = $('.ticket_list');

            $documentListDiv.empty();

            var title = $('<h4></h4>').text('Boleto').addClass('mb-1');
            $documentListDiv.append(title);

            $.each(documents, function(index, document) {
                
                var link = $('<a></a>')
                    .attr('href', '/storage/' + document.filepath)
                    .text(document.filename)
                    .attr('target', '_blank')
                    .addClass('mb-1')
                    .attr('data-id', document.id); 

                var icon = $('<span></span>')
                    .addClass('icon-hide') 
                    .html('&#x1F5D1;')
                    .css('cursor', 'pointer')
                    .on('click', function() {
                        
                        let documentId = link.data('id');
                        doc_tickets.push(documentId);

                        link.add(icon).hide();
                    });

                var itemDiv = $('<div></div>').addClass('mb-1');
                itemDiv.append(link).append(' ').append(icon);
                $documentListDiv.append(itemDiv);

                $documentListDiv.append('<br>');
        })
        })
        .catch(function(error) {
            console.error('Erro na requisição:', error);
        });

        $(".campo_preco").mask("#.##0,00", {
			reverse: true
		});

        $(".campo_porcentagem").mask('##00%', {
            reverse: true
        });

        $('#btnAddBrokers').on("click", async function(eve) {

            eve.preventDefault();

            $(".form-add-billing").submit();

        });

        $(".form-add-billing").on("submit", async function(eve) {

            eve.preventDefault();

            if ($(".form-add-billing").get(0).checkValidity()) {

                // let json = Object.fromEntries((new FormData($(".form-add-billing").get(0)))
                //     .entries());

                let formData = new FormData($(".form-add-billing").get(0));
                formData.append('_method', 'PUT');
                formData.append('_token', '{{ csrf_token() }}');

                docs.forEach((docId, index) => {
                    formData.append(`docs[]`, docId);
                });

                doc_tickets.forEach((ticketId, index) => {
                    formData.append(`doc_tickets[]`, ticketId);
                });

                let billing_id = $("#billing_id").val();


                try {

                    let {
                        data: response
                    } = await axios({
                        url: `{{ route('api.billing.update', '') }}/${billing_id}`,
                        method: 'post',
                        data: formData,
                        headers: {
                            "Authorization": "Bearer {{ session('Authorization') }}",
                            "Content-Type": "multipart/form-data"
                        }
                    }).catch((e) => {

                        let response = e.response;

                        @if (env('APP_DEBUG'))
                            console.warn(e)
                        @endif

                        if (response.status === 400 || response.status === 422) {
                            Swal.fire({
                                title: 'Ops!',
                                text: response.data.message,
                                icon: 'error',
                                cancelButtonText: '{{ __("locale.Table.parameter.Column.CloseButton") }}'
                            })
                        } else if (response.status === 404) {
                            Swal.fire({
                                title: 'Ops!',
                                text: '{{ __("locale.Table.parameter.Column.RequestedNotFound") }}',
                                icon: 'error',
                                cancelButtonText: '{{ __("locale.Table.parameter.Column.CloseButton") }}'
                            })
                        } else {

                            Swal.fire({
                                title: 'Ops!',
                                text: '{{ __("locale.Table.parameter.Column.RegisterError") }}',
                                icon: 'error',
                                cancelButtonText: '{{ __("locale.Table.parameter.Column.CloseButton") }}'
                            })

                        }

                    });

                    Swal.fire({
                        title: 'Uhuul!',
                        text: '{{ __("locale.Table.Billing.Column.AddSuccess") }}',
                        icon: 'success',
                    }).then((_) => {
                        if (_.isConfirmed) {
                            window.location.href = '{{ route('dashboard.billing.index') }}'
                        }
                    })


                } catch (e) {

                }
            }

        });

        $('#btnReset').on('click', function() {
            window.location.href = '{{ route('dashboard.billing.index') }}';
        });


    });
</script>
@endsection