@extends('master')

@section('content')
    <div class="page-view active">
        <div class="add-page-container">
            <div class="add-page-header">
                <h1 class="add-page-title">Tambah Customer Baru</h1>
            </div>

            <div class="add-page-card">
                <form action="{{ route('customer.update', $customer->id) }}" method="POST">
                    @csrf
                    <div class="form-section-label">Tipe Customer</div>
                    <div class="form-grid">
                        <div class="form-group">
                            <div class="form-label">Tipe Customer <span class="required">*</span></div>
                            <select class="form-input @error('type') is-error @enderror" name="type" id="inp-tipe" onchange="onTipeChange()">
                                <option value="">— Pilih tipe customer —</option>
                                <option value="1" {{ (old('type', $customer->type) == '1') ? 'selected' : '' }}>Dealer</option>
                                <option value="2" {{ (old('type', $customer->type) == '2') ? 'selected' : '' }}>Retailer</option>
                                <option value="3" {{ (old('type', $customer->type) == '3') ? 'selected' : '' }}>Petani</option>
                            </select>
                            @error('type')
                            <span class="form-error show">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div id="sec-fields" style="display:none">
                        <div class="form-section-label" id="section-title">Informasi Detail</div>
                        <div class="form-grid">
                            <div class="form-group">
                                <div class="form-label" id="lbl-name">Nama <span class="required">*</span></div>
                                <input class="form-input @error('name') is-error @enderror" name="name" id="inp-name" value="{{ old('name', $customer->name) }}" />
                                @error('name')
                                <span class="form-error show">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group" id="grp-crop" style="display:none">
                                <div class="form-label">Tipe Crop <span class="required">*</span></div>
                                <input class="form-input @error('type_crop') is-error @enderror" name="type_crop" id="inp-crop" value="{{ old('type_crop', $customer->type_crop) }}" />
                                @error('type_crop')
                                <span class="form-error show">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group" id="grp-luas" style="display:none">
                                <div class="form-label">Luas Lahan (m²) <span class="required">*</span></div>
                                <input class="form-input @error('land_area') is-error @enderror" name="land_area" id="inp-luas" type="number" value="{{ old('land_area', $customer->land_area) }}" />
                                @error('land_area')
                                <span class="form-error show">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <div class="form-label">Alamat <span class="required">*</span></div>
                                <input class="form-input @error('address') is-error @enderror" name="address" id="inp-alamat" value="{{ old('address', $customer->address) }}" />
                                @error('address')
                                <span class="form-error show">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <div class="form-label">Nama Pemilik <span class="required">*</span></div>
                                <input class="form-input @error('owner_name') is-error @enderror" name="owner_name" id="inp-pemilik" value="{{ old('owner_name', $customer->owner_name) }}" />
                                @error('owner_name')
                                <span class="form-error show">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <div class="form-label">No. HP <span class="required">*</span></div>
                                <input class="form-input @error('phone_number') is-error @enderror" name="phone_number" id="inp-hp" type="tel" value="{{ old('phone_number', $customer->phone_number) }}" />
                                @error('phone_number')
                                <span class="form-error show">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-footer">
                        <button type="submit" class="btn-save">Perbarui Data</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        function onTipeChange() {
            const tipe = document.getElementById('inp-tipe').value;
            const secFields = document.getElementById('sec-fields');
            const lblName = document.getElementById('lbl-name');
            const inpName = document.getElementById('inp-name');
            const grpCrop = document.getElementById('grp-crop');
            const grpLuas = document.getElementById('grp-luas');
            const sectionTitle = document.getElementById('section-title');

            // Jika tipe kosong, sembunyikan semua
            if (tipe === "") {
                secFields.style.display = "none";
                return;
            }

            // Tampilkan section detail
            secFields.style.display = "block";

            // Reset tampilan field tambahan
            grpCrop.style.display = "none";
            grpLuas.style.display = "none";

            // Logika label sesuai tipe
            if (tipe === "1") {
                sectionTitle.innerText = "Informasi Dealer";
                lblName.innerHTML = 'Nama Dealer <span class="required">*</span>';
                inpName.placeholder = "Masukkan nama dealer";
            } else if (tipe === "2") {
                sectionTitle.innerText = "Informasi Retailer";
                lblName.innerHTML = 'Nama Retailer <span class="required">*</span>';
                inpName.placeholder = "Masukkan nama retailer";
            } else if (tipe === "3") {
                sectionTitle.innerText = "Informasi Petani";
                lblName.innerHTML = 'Nama Petani <span class="required">*</span>';
                inpName.placeholder = "Masukkan nama petani";

                // Khusus petani, tampilkan field crop dan luas
                grpCrop.style.display = "block"; // Pakai block agar konsisten
                grpLuas.style.display = "block";
            }
        }

        // Jalankan saat halaman selesai dimuat
        document.addEventListener('DOMContentLoaded', function() {
            // Langsung panggil fungsi untuk menyesuaikan UI dengan data yang ada
            onTipeChange();
        });
    </script>
@endpush



@push('styles')
    <style>
        .form-page-container {
            max-width: 100%;
        }
        .form-page-header {
            display: flex; align-items: center; gap: 12px;
            margin-bottom: 20px;
        }
        .btn-back {
            display: flex; align-items: center; gap: 6px;
            padding: 7px 14px; font-size: 13px; font-weight: 500;
            background: var(--white); color: var(--gray-600);
            border: 1.5px solid var(--gray-200);
            border-radius: 10px; cursor: pointer;
            font-family: 'DM Sans', sans-serif; transition: all 0.15s;
            text-decoration: none;
        }
        .btn-back:hover { background: var(--gray-100); }
        .form-page-title {
            font-family: 'Sora', sans-serif;
            font-size: 17px; font-weight: 700; color: var(--gray-900);
        }

        .form-card {
            background: var(--white);
            border-radius: 14px;
            border: 1px solid var(--gray-200);
            padding: 24px 28px;
            max-width: 600px;
        }
        .form-section-label {
            font-family: 'Sora', sans-serif;
            font-size: 11px; font-weight: 700;
            color: var(--gray-500); text-transform: uppercase;
            letter-spacing: 0.06em; margin-bottom: 14px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--gray-100);
        }
        .form-grid { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
        .form-group { display: flex; flex-direction: column; gap: 6px; }
        .form-label {
            font-size: 12px; font-weight: 500; color: var(--gray-600);
            font-family: 'Sora', sans-serif;
        }
        .form-label .required { color: var(--red-main); }
        .form-input {
            padding: 9px 12px; font-size: 13px;
            border: 1.5px solid var(--gray-200);
            border-radius: 10px;
            background: var(--gray-50);
            color: var(--gray-900); outline: none;
            transition: border-color 0.15s;
            font-family: 'DM Sans', sans-serif; width: 100%;
            box-sizing: border-box;
        }
        .form-input:focus { border-color: var(--red-main); background: var(--white); }
        .form-input.is-error { border-color: var(--red-main) !important; }

        .form-error {
            font-size: 11px; color: var(--red-main); display: none; font-weight: 500;
        }
        .form-error.show { display: block; }

        .form-footer {
            display: flex; gap: 8px; justify-content: flex-end;
            padding-top: 16px; border-top: 1px solid var(--gray-200);
        }
        .btn-save {
            padding: 9px 22px; font-size: 13px; font-weight: 600;
            background: var(--red-main); color: white; border: none;
            border-radius: 10px; cursor: pointer;
            font-family: 'Sora', sans-serif; transition: background 0.15s;
            box-shadow: 0 3px 10px rgba(163,45,45,0.22);
        }
        .btn-save:hover { background: var(--red-800); }
        .btn-save:disabled { opacity: 0.6; cursor: not-allowed; }
        select.form-input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;

            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;

            background-position: right 14px center;

            background-size: 16px;
            padding-right: 40px;

            cursor: pointer;
        }
    </style>
@endpush



