@extends('layouts.app', ['page' => __('Listado De Clientes'), 'pageSlug' => 'customers', 'section' => 'menu'])

@section('content')

  <div class="container-fluid mt--7">
    <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-6">
                            <h3 class="mb-0">{{ __('Crear Cliente')  }} </h2>
                        </div>
                        <div class="col-6 text-right">
                        <a class="btn btn-sm btn-gradient units" href="{{ route('customers.index') }}">{{ __('Regresar a Clientes') }}</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                  <form enctype="multipart/form-data" method="post" action="{{ route('customers.store') }}" autocomplete="off">
                    @csrf

                    <h6 class="heading-small text-muted mb-4">{{ __('Información de Cliente') }}</h6>
                    <div class="pl-lg-4">

                      <div class="row">
                        <div class="col-md-12">
                          <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
                            <label class="form-control-label" for="input-name">{{ __('Nombre') }}</label>
                            <input type="text" name="name" id="input-name" class="form-control form-control-alternative{{ $errors->has('name') ? ' is-invalid' : '' }}" value="{{ old('name') }}" required autofocus>
                            @include('alerts.feedback', ['field' => 'name'])
                          </div>
                        </div>
                      </div>

                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group{{ $errors->has('birthdate') ? ' has-danger' : '' }}">
                            <label class="form-control-label" for="input-birthdate">{{ __('Fecha de nacimiento') }}</label>
                            <input type="date" name="birthdate" id="input-birthdate" class="form-control form-control-alternative{{ $errors->has('birthdate') ? ' is-invalid' : '' }}" value="{{ old('birthdate') }}" autofocus>
                            @include('alerts.feedback', ['field' => 'birthdate'])
                          </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group{{ $errors->has('gender') ? ' has-danger' : '' }}">
                                <label class="form-control-label" for="input-gender">{{ __('Género') }}</label>
                                <select name="gender" id="input-gender" class="form-control form-control-alternative{{ $errors->has('gender') ? ' is-invalid' : '' }}" required>
                                    <option value="" disabled selected>{{ __('Seleccione un género') }}</option>
                                    <option value="Masculino" {{ old('gender') == 'Masculino' ? 'selected' : '' }}>{{ __('Masculino') }}</option>
                                    <option value="Femenino" {{ old('gender') == 'Femenino' ? 'selected' : '' }}>{{ __('Femenino') }}</option>
                                    <option value="Otro" {{ old('gender') == 'Otro' ? 'selected' : '' }}>{{ __('Otro') }}</option>
                                </select>
                                @include('alerts.feedback', ['field' => 'gender'])
                            </div>
                        </div>
                      </div>

                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group{{ $errors->has('curp') ? ' has-danger' : '' }}">
                            <label class="form-control-label" for="input-curp">{{ __('CURP (Opcional)') }}</label>
                            <input type="text" name="curp" id="input-curp" class="form-control form-control-alternative{{ $errors->has('curp') ? ' is-invalid' : '' }}" value="{{ old('curp') }}">
                            @include('alerts.feedback', ['field' => 'curp'])
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group{{ $errors->has('email') ? ' has-danger' : '' }}">
                            <label class="form-control-label" for="input-email">{{ __('Correo') }}</label>
                            <input type="email" name="email" id="input-email" class="form-control form-control-alternative{{ $errors->has('email') ? ' is-invalid' : '' }}" value="{{ old('email') }}" required autofocus>
                            @include('alerts.feedback', ['field' => 'email'])
                          </div>
                        </div>
                      </div>

                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group{{ $errors->has('phone') ? ' has-danger' : '' }}">
                            <label class="form-control-label" for="input-phone">{{ __('Teléfono') }}</label>
                            <input type="tel" name="phone" id="input-phone" class="form-control form-control-alternative{{ $errors->has('phone') ? ' is-invalid' : '' }}" value="{{ old('phone') }}" autofocus>
                            @include('alerts.feedback', ['field' => 'phone'])
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group{{ $errors->has('cellphone') ? ' has-danger' : '' }}">
                            <label class="form-control-label" for="input-cellphone">{{ __('Celular') }}</label>
                            <input type="tel" name="cellphone" id="input-cellphone" class="form-control form-control-alternative{{ $errors->has('cellphone') ? ' is-invalid' : '' }}" value="{{ old('cellphone') }}" autofocus>
                            @include('alerts.feedback', ['field' => 'cellphone'])
                          </div>
                        </div>
                      </div>

                      <br/>
                      <div class="row">
                        <div class="col-md-12">
                          <div class="form-group">
                            <label class="form-control-label" for="input-blueprints">{{ __('Documentos') }}</label>
                            <div id="blueprints-container">
                                @if(old('blueprints_name'))
                                    @foreach(old('blueprints_name') as $index => $blueprintName)
                                        <div class="input-group mb-3">
                                            <div class="col-md-4">
                                                <input style="border-left: 1px solid;border-right: 1px solid;" type="text" name="blueprints_name[]" class="form-control" placeholder="{{ __('Nombre del documento') }}" value="{{ $blueprintName }}">
                                            </div>
                                            <div class="col-md-4 custom-input-file ">
                                                <div class="d-flex bw-dflex-center">
                                                    <label class="form-control-label" for="input-main_blueprint">{{ __('Archivo') }}</label>
                                                    <input type="file" name="blueprints_files[]" class="form-control form-control-alternative" onchange="previewBlueprintImage(this)">
                                                    <div class="blueprint-file-preview" style="margin-left: 10px;"></div>
                                                </div>
                                            </div>
                                            <div class="input-group-append">
                                                @if($loop->first)
                                                    <button class="btn btn-outline-secondary btn-sm add-blueprint btn-gradient" type="button">+</button>
                                                @else
                                                    <button class="btn btn-outline-secondary btn-sm remove-blueprint btn-gradient" type="button">-</button>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="input-group mb-3">
                                        <div class="col-md-4">
                                            <input style="border-left: 1px solid;border-right: 1px solid;" type="text" name="blueprints_name[]" class="form-control" placeholder="{{ __('Nombre del documento') }}">
                                        </div>
                                        <div class="col-md-4 custom-input-file ">
                                            <div class="d-flex bw-dflex-center">
                                                <label class="form-control-label" for="input-main_blueprint">{{ __('Archivo') }}</label>
                                                <input type="file" name="blueprints_files[]" class="form-control form-control-alternative" onchange="previewBlueprintImage(this)">
                                                <div class="blueprint-file-preview" style="margin-left: 10px;"></div>
                                            </div>
                                        </div>
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary btn-sm add-blueprint btn-gradient" type="button">+</button>
                                        </div>
                                    </div>
                                @endif
                            </div>
                          </div>
                        </div>
                      </div>

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

            </div>
        </div>
    </div>
  </div>
@endsection

@push('js')
    <script>
        /* LOGICA DOCUMENTOS */
            document.addEventListener('click', function (e) {
                if (e.target.classList.contains('add-blueprint')) {
                    let newBlueprintGroup = document.createElement('div');
                    newBlueprintGroup.className = 'input-group mb-3';
                    newBlueprintGroup.innerHTML = `
                        <div class="col-md-4">
                            <input style="border-left: 1px solid;border-right: 1px solid;" type="text" name="blueprints_name[]" class="form-control" placeholder="{{ __('Nombre del documento') }}">
                        </div>
                         <div class="col-md-4 custom-input-file ">
                            <div class="d-flex bw-dflex-center">
                                <label class="form-control-label" for="input-main_blueprint">{{ __('Archivo') }}</label>
                                <input type="file" name="blueprints_files[]" class="form-control form-control-alternative" onchange="previewBlueprintImage(this)">
                                <div class="blueprint-file-preview" style="margin-left: 10px;"></div>
                            </div>
                        </div>
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary btn-sm remove-blueprint btn-gradient" type="button">-</button>
                        </div>
                    `;
                    document.getElementById('blueprints-container').appendChild(newBlueprintGroup);
                }
                if (e.target.classList.contains('remove-blueprint')) {
                    e.target.closest('.input-group').remove();
                }
            });

            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';
                }
            };
        /* FIN LOGICA DOCUMENTOS */

    </script>
@endpush