@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-secondary">
                    <div class="card-header">
                        <h3 class="card-title">{!! $variables['judul'] !!}</h3>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('dealers.store', $data->id ?? 0) }}" id="dealer-form">
                            @csrf
                            <div class="row">
                                <div class="form-group form-floating mb-3 col-md-6">
                                    <input value="{{ old('customer_code_bmu', $data->customer_code_bmu ?? '') }}" type="text" class="form-control" name="customer_code_bmu" placeholder="" required>
                                    <label>Kode BMU</label>
                                    @if($errors->has('customer_code_bmu'))
                                        <span class="text-danger">{{ $errors->first('customer_code_bmu') }}</span>
                                    @endif
                                </div>
                                <div class="form-group form-floating mb-3 col-md-6">
                                    <input value="{{ old('dealer_name', $data->dealer_name ?? '') }}" type="text" class="form-control" name="dealer_name" placeholder="" required>
                                    <label>Nama Dealer</label>
                                    @if($errors->has('dealer_name'))
                                        <span class="text-danger">{{ $errors->first('dealer_name') }}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group form-floating mb-3 col-md-6">
                                    <input value="{{ old('account_group', $data->account_group ?? '') }}" type="text" class="form-control" name="account_group" placeholder="">
                                    <label>Account Group</label>
                                </div>
                                <div class="form-group form-floating mb-3 col-md-6">
                                    <input value="{{ old('brand', $data->brand ?? '') }}" type="text" class="form-control" name="brand" placeholder="">
                                    <label>Brand</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group form-floating mb-3 col-md-6">
                                    <input type="password" class="form-control" name="password" placeholder="" autocomplete="new-password" {{ $data->id ? '' : 'required' }}>
                                    <label>Password {{ $data->id ? '(kosongkan jika tidak diubah)' : '' }}</label>
                                    @if($errors->has('password'))
                                        <span class="text-danger">{{ $errors->first('password') }}</span>
                                    @endif
                                </div>
                                <div class="form-group form-floating mb-3 col-md-6">
                                    <input value="{{ old('email', $data->email ?? '') }}" type="email" class="form-control" name="email" placeholder="">
                                    <label>Email</label>
                                    @if($errors->has('email'))
                                        <span class="text-danger">{{ $errors->first('email') }}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group form-floating mb-3 col-md-4">
                                    <input value="{{ old('contact_person', $data->contact_person ?? '') }}" type="text" class="form-control" name="contact_person" placeholder="">
                                    <label>Contact Person</label>
                                </div>
                                <div class="form-group form-floating mb-3 col-md-4">
                                    <input value="{{ old('phone', $data->phone ?? '') }}" type="tel" inputmode="numeric" class="form-control" name="phone" placeholder="" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                                    <label>Nomor HP</label>
                                </div>
                                <div class="form-group form-floating mb-3 col-md-4">
                                    <select name="city" id="city-select" class="form-control select2" style="width:100%">
                                        <option value="">-- Pilih Kota --</option>
                                        @foreach($cities as $c)
                                            <option value="{{ $c->city_name }}"
                                                data-province="{{ $c->province_name }}"
                                                {{ old('city', $data->city ?? '') === $c->city_name ? 'selected' : '' }}>
                                                {{ $c->city_name }} — {{ $c->province_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <label>Kota</label>
                                </div>
                                <div class="form-group form-floating mb-3 col-md-4">
                                    <input value="{{ old('province', $data->province ?? '') }}" type="text" class="form-control" name="province" id="province-field" placeholder="" readonly>
                                    <label>Provinsi (otomatis)</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group form-floating mb-3 col-md-12">
                                    <textarea name="address" class="form-control" placeholder="" rows="2">{{ old('address', $data->address ?? '') }}</textarea>
                                    <label>Alamat</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group mb-3 col-md-6">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" name="is_active" id="is_active" value="1"
                                            {{ old('is_active', $data->is_active ?? true) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_active">Aktif</label>
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-outline-primary"><i class="fa-regular fa-floppy-disk"></i> Save</button>
                            <a href="{{ $data->id ? route('dealers.show', $data->id) : route('dealers.index') }}" class="btn btn-outline-secondary" data="back" onclick="return notificationBeforeBack(event, this);">Back</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
<style>
.form-floating .select2-container .select2-selection--single {
    height: calc(3.5rem + 2px);
    padding: 1rem 0.75rem 0.25rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}
.form-floating .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
    color: #495057;
}
.form-floating .select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(3.5rem + 2px);
}
.form-floating > label { z-index: 5; }
</style>
@push('scripts')
<script>
$(function() {
    // City select2 — sudah di-init oleh global handler di base_view
    // Cukup tambahkan event listener untuk auto-fill province
    $('#city-select').on('select2:select', function(e) {
        var province = $(e.params.data.element).data('province');
        $('#province-field').val(province);
    });
    $('#city-select').on('select2:clear', function() {
        $('#province-field').val('');
    });

    // Set province dari nilai yang sudah terpilih saat edit
    var selectedOption = $('#city-select option:selected');
    if (selectedOption.val()) {
        $('#province-field').val(selectedOption.data('province'));
    }

    var isSubmitting = false;
    $('#dealer-form').on('submit', function(e) {
        e.preventDefault();
        if (isSubmitting) return;
        isSubmitting = true;
        $('#loaderaditdinda').show();
        var form = $(this);
        $.ajax({
            type: 'POST',
            url: form.attr('action'),
            data: form.serialize(),
            dataType: 'json'
        }).done(function(data) {
            Swal.fire({
                icon: data[0],
                text: data[1],
                showCancelButton: false,
                confirmButtonColor: '#6c757d',
                confirmButtonText: 'OK',
                allowOutsideClick: false
            }).then(function(result) {
                if (result.isConfirmed && data[0] === 'success') {
                    @if($data->id)
                        window.location.href = "{{ route('dealers.show', $data->id) }}";
                    @else
                        window.location.href = "{{ route('dealers.index') }}";
                    @endif
                }
            });
        }).fail(function(xhr) {
            var errorText = 'Terjadi kesalahan. Silakan coba lagi.';
            if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                errorText = Object.values(xhr.responseJSON.errors).map(function(e){ return e[0]; }).join('\n');
            } else if (xhr.responseJSON && xhr.responseJSON.message) {
                errorText = xhr.responseJSON.message;
            }
            Swal.fire({ icon: 'error', title: 'Validasi Gagal', text: errorText });
        }).always(function() {
            isSubmitting = false;
            $('#loaderaditdinda').hide();
        });
    });
});
</script>
@endpush