@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.store') }}" method="POST">
                    @csrf
                    <div class="form-section-label">Tipe Customer</div>
                    <div class="form-grid">
                        <div class="c-field">
                            <div class="c-label">Tipe Customer <span class="required">*</span></div>
                            <select class="c-input @error('type') is-error @enderror" name="type" id="inp-tipe" onchange="onTipeChange()">
                                <option value="">— Pilih tipe customer —</option>
                                @foreach($customer_types as $customerType)
                                    <option value="{{ $customerType->id }}" {{ old('type') == $customerType->id ? 'selected' : '' }}>{{ $customerType->name }}</option>
                                @endforeach
                            </select>
                            @error('type')
                            <span class="c-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="c-field">
                                <div class="c-label" id="lbl-name">Nama <span class="required">*</span></div>
                                <input class="c-input @error('name') is-error @enderror" name="name" id="inp-name" value="{{ old('name') }}" />
                                @error('name')
                                <span class="c-error show">{{ $message }}</span>
                                @enderror
                            </div>

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

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

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

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

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

                    <div class="form-footer">
                        <button type="submit" class="btn-save">Simpan 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";
                grpLuas.style.display = "block";
            }
        }
    </script>
    @vite(['resources/js/customer/add.js'])
@endpush

@push('styles')
    <style>
        .add-page-container {
            max-width: 100%;
        }
        .add-page-header {
            display: flex; align-items: center; gap: 12px;
            margin-bottom: 20px;
        }
        .add-page-title {
            font-family: 'Sora', sans-serif;
            font-size: 17px; font-weight: 700; color: var(--gray-900);
        }

        .add-page-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; }
        .c-field { display: flex; flex-direction: column; gap: 6px; }
        .c-label {
            font-size: 12px; font-weight: 500; color: var(--gray-600);
            font-family: 'Sora', sans-serif;
        }
        .c-label .required { color: var(--red-main); }
        .c-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;
        }
        .c-input:focus { border-color: var(--red-main); background: var(--white); }
        .c-input.is-error { border-color: var(--red-main) !important; }

        .c-error {
            font-size: 11px; color: var(--red-main); display: none; font-weight: 500;
        }
        .c-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;
        }
        select.c-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