@extends('layouts.app', ['page' => __('Conciliar pago'), 'pageSlug' => 'accountstatementconciliation', 'section' => 'menu'])

@section('content')

    <div class="row">
        <div class="col-md-12">
           <div class="card ">
                <div class="card-header">
                    <div class="row">
                        <div class="col-5">
                          @if(!is_null($blueprint->name))
                            <span class="bw-card-title bw-card-text-bold">{{ __('Conciliar pago de') }} {{ $accountStatement->customer->name }}</span>
                          @else
                            <span class="bw-card-title bw-card-text-bold">Ingresar Pago </span>
                          @endif
                            <span class="bw-card-title-bold">
                                <i class="fa-solid fa-circle-right fa-lg" style="color: #aa9d64;"></i>
                                <br/>{{ $accountStatement->tipo_de_pago }} @if (is_null($accountStatement->payment_date)) @else , Enviado el {{ $accountStatement->payment_date->translatedFormat('d F Y') }} @endif
                            </span>
                        </div>
                        <div class="col-5 text-center">
                          @if(!is_null($blueprint->name))
                            <span class="bw-card-title bw-card-text-bold">Comprobante de Pago:<br/> {{ $blueprint->name }}</span>
                          @else
                            <span class="bw-card-title bw-card-text-bold">Ingresa la información <br/>y el Comprobante de pago</span>
                          @endif
                        </div>
                        <div class="col-2 text-right">

                        @if (is_null($blueprint->name))
                          <a href="{{ route('customers.pendingconciliation') }}" class="btn btn-sm btn-primary btn-gradient">
                                {{ __('Regresar') }}
                          </a>
                        @else
                          <a href="{{ route('customers.validatepayment', ['customer' => $accountStatement->customer_id, 'unit' => $accountStatement->unit_id, 'accountStatement' => $accountStatement, 'blueprint' => $blueprint]) }}" class="btn btn-sm btn-primary btn-gradient">
                                {{ __('Regresar') }}
                          </a>
                        @endif

                        </div>

                    </div>
                </div>

                <div class="card-body">
                <form enctype="multipart/form-data" method="post" action="{{ route('customers.accountStatementConciliationUpdate', ['accountStatement' => $accountStatement]) }}" autocomplete="off">
                    @csrf

                    <div class="pl-lg-4">

                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group{{ $errors->has('amount') ? ' has-danger' : '' }}">
                            <label class="form-control-label" for="input-amount">{{ __('Importe') }}</label>
                            <input type="text" name="amount" id="input-amount" class="form-control form-control-alternative{{ $errors->has('amount') ? ' is-invalid' : '' }}" placeholder="{{ __('Importe') }}" required autofocus>
                            @include('alerts.feedback', ['field' => 'amount'])
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group{{ $errors->has('conciliation_date') ? ' has-danger' : '' }}">
                            <label class="form-control-label" for="input-conciliation_date">{{ __('Fecha de pago') }}</label>
                            <input type="date" name="conciliation_date" id="input-conciliation_date" class="form-control form-control-alternative{{ $errors->has('conciliation_date') ? ' is-invalid' : '' }}" placeholder="{{ __('Fecha de conciliación') }}" value="{{ old('conciliation_date', date('Y-m-d')) }}" required autofocus>
                            @include('alerts.feedback', ['field' => 'conciliation_date'])
                          </div>
                        </div>
                      </div>

                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group{{ $errors->has('description') ? ' has-danger' : '' }}">
                            <label class="form-control-label" for="input-description">{{ __('Descripción') }}</label>
                            <input type="text" name="description" id="input-description" class="form-control form-control-alternative{{ $errors->has('description') ? ' is-invalid' : '' }}" placeholder="{{ __('Descripción') }}" required autofocus>
                            @include('alerts.feedback', ['field' => 'description'])
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group{{ $errors->has('payment_type') ? ' has-danger' : '' }}">
                            <label class="form-control-label" for="input-payment_type">{{ __('Tipo de Pago') }}</label>
                            <input type="text" name="payment_type" id="input-payment_type" class="form-control form-control-alternative{{ $errors->has('payment_type') ? ' is-invalid' : '' }}" placeholder="{{ __('Tipo de Pago') }}" required autofocus>
                            @include('alerts.feedback', ['field' => 'payment_type'])
                          </div>
                        </div>
                      </div>

                      @if(is_null($blueprint->name))
                        <div class="row">
                          <div class="col-md-12">
                            <div class="form-group">
                              <label class="form-control-label" for="input-blueprints">{{ __('Comprobante de Pago') }}</label>
                              <div id="blueprints-container">
                                  <div class="input-group mb-3">
                                      <div class="col-md-6" style="padding-left: 0;">
                                          <input style="border-left: 1px solid;border-right: 1px solid;" type="text" name="blueprint_name" class="form-control" placeholder="{{ __('Nombre del documento') }}" @if(is_null($blueprint->name)) required autofocus @endif>
                                      </div>
                                      <div class="col-md-6 custom-input-file"  style="padding-left: 15px;">
                                          <div class="d-flex bw-dflex-center">
                                              <label class="form-control-label" for="input-main_blueprint">{{ __('Archivo') }}</label>
                                              <input type="file" name="blueprint_file" class="form-control form-control-alternative" onchange="previewBlueprintImage(this)" @if(is_null($blueprint->name)) required autofocus @endif>
                                              <div class="blueprint-file-preview" style="margin-left: 10px;"></div>
                                          </div>
                                      </div>
                                  </div>
                                </div>
                            </div>
                          </div>
                        </div>
                      @endif

                      <div class="form-group">
                        <input type="hidden" name="account_statement_id" id="input-accountStatement" class="form-control form-control-alternative" value="{{ $accountStatement->id }}" required autofocus>
                        <input type="hidden" name="account_statement_blue_prints_id" id="input-blueprint" class="form-control form-control-alternative" value="{{ $blueprint->id }}" required autofocus>
                      </div>

                      <br/>
                      <div class="text-center"><button type="submit" class="btn btn-sm btn-gradient">{{ __('Guardar') }}</button></div>
                    </div>
                  </form>
                </div>
            </div> 
        </div>
    </div>

@endsection

@push('js')

<script>
document.addEventListener("DOMContentLoaded", function () {
    const inputAmount = document.getElementById("input-amount");

    inputAmount.addEventListener("input", function (event) {
        let value = inputAmount.value.replace(/\D/g, ''); // Elimina caracteres no numéricos
        if (value) {
            value = Number(value).toLocaleString("es-MX"); // Formatea con separadores de miles
        }
        inputAmount.value = value;
    });

    inputAmount.addEventListener("blur", function () {
        let value = inputAmount.value.replace(/\D/g, ''); // Asegura que solo haya números
        if (value) {
            inputAmount.value = Number(value).toLocaleString("es-MX"); // Reaplica formato
        }
    });
});
window.previewBlueprintImage = function(input) {
    let file = input.files[0];
    let preview = input.nextElementSibling;
    preview.innerHTML = '';

    if (file) {
      let reader = new FileReader();
      let fileType = file.type;

      reader.onload = function (e) {
        let previewElement;

        if (fileType.startsWith('image/')) {
          previewElement = document.createElement('img');
          previewElement.src = e.target.result;
          previewElement.style.maxWidth = '100px';
          previewElement.style.height = '50px';
          previewElement.style.border = '1px solid #ddd';
          previewElement.style.borderRadius = '4px';
        } else if (fileType === 'application/pdf') {
            previewElement = document.createElement('div');
            previewElement.textContent = '📄 PDF';
            previewElement.style.fontWeight = 'bold';
            previewElement.style.padding = '5px';
            previewElement.style.border = '1px solid #ddd';
            previewElement.style.borderRadius = '4px';
        } else if (file.name.endsWith('.doc') || file.name.endsWith('.docx')) {
            previewElement = document.createElement('div');
            previewElement.textContent = '📄 Word';
            previewElement.style.fontWeight = 'bold';
            previewElement.style.padding = '5px';
            previewElement.style.border = '1px solid #ddd';
            previewElement.style.borderRadius = '4px';
        } else {
            previewElement = document.createElement('div');
            previewElement.textContent = '📄 Archivo';
            previewElement.style.fontWeight = 'bold';
            previewElement.style.padding = '5px';
            previewElement.style.border = '1px solid #ddd';
            previewElement.style.borderRadius = '4px';
        }
        preview.appendChild(previewElement);
      }; 
      reader.readAsDataURL(file);
    }
    else {
        preview.style.display = 'none';
    }
};
</script>

@endpush