@extends('layouts.app', ['page' => __('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">{{ __('Editar Cliente') }}: {{ $customer->name }}</h3>
                        </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.update', ['customer' => $customer]) }}" autocomplete="off">
                        @csrf
                        @method('put')

                        <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', $customer->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', $customer->birthdate ? (is_string($customer->birthdate) ? $customer->birthdate : $customer->birthdate->format('Y-m-d')) : '') }}">
                                        @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 {{ !old('gender', $customer->gender) ? 'selected' : '' }}>{{ __('Seleccione un género') }}</option>
                                            <option value="Masculino" {{ old('gender', $customer->gender) == 'Masculino' ? 'selected' : '' }}>{{ __('Masculino') }}</option>
                                            <option value="Femenino" {{ old('gender', $customer->gender) == 'Femenino' ? 'selected' : '' }}>{{ __('Femenino') }}</option>
                                            <option value="Otro" {{ old('gender', $customer->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', $customer->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', $customer->email) }}" required>
                                        @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', $customer->phone) }}">
                                        @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', $customer->cellphone) }}">
                                        @include('alerts.feedback', ['field' => 'cellphone'])
                                    </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>
        document.getElementById('houseDevelopment_id').addEventListener('change', function() {
            const houseDevelopment = this.value;
            fetch(`/admin/get-typologies/${houseDevelopment}`)
                .then(response => response.json())
                .then(data => {
                    let typologySelect = document.getElementById('typology_id');
                    typologySelect.innerHTML = '<option value="">Seleccione una Tipología</option>';
                    data.forEach(typology => {
                        typologySelect.innerHTML += `<option value="${typology.id}">${typology.name}</option>`;
                    });

                    let unitSelect = document.getElementById('unit_id');
                    unitSelect.innerHTML = '<option value="">Seleccione una Unidad</option>';
                });

        document.getElementById('typology_id').addEventListener('change', function() {
            const typology = this.value;
            fetch(`/admin/get-units/${typology}`)
                .then(response => response.json())
                .then(data => {
                    let unitSelect = document.getElementById('unit_id');
                    unitSelect.innerHTML = '<option value="">Seleccione una unidad</option>';
                    data.forEach(unit => {
                        unitSelect.innerHTML += `<option value="${unit.id}">${unit.name}</option>`;
                    });
                });
        });

    </script>
@endpush