@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto min-h-screen px-6 py-4 space-y-8">
    <!-- 🏷️ Page Title -->
    <div>
        <h1 class="text-3xl font-bold text-gray-800 mb-2">Profil</h1>
        <p class="text-gray-500">Kemaskini maklumat koperasi dan akaun pengguna anda di sini.</p>
    </div>

    <!-- 👤 Akaun Pengguna--> 
    <div class="bg-white border border-gray-200 shadow-sm rounded-xl p-6 space-y-6">
        @include('profile.partials.update-profile-information-form')
    </div>

    <!-- 🏢 Maklumat Koperasi -->
    <div class="bg-white border border-gray-200 shadow-sm rounded-xl p-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Maklumat Koperasi</h2>

        <form method="POST" action="{{ route('profile.koperasi.update') }}">
            @csrf
            @method('PATCH')

            <!-- ===================== -->
            <!-- MAKLUMAT AM -->
            <!-- ===================== -->
            <h2 class="text-indigo-600 font-semibold mb-4">Maklumat Am</h2>

            <label class="font-medium">Nama Koperasi</label>
            <input type="text" name="name" required
                value="{{ old('name', $user->name) }}"
                class="h-10 w-full mt-2 mb-4 px-3 border border-slate-300 rounded-full
                        outline-none focus:ring-2 focus:ring-indigo-400 transition">

            <label class="font-medium">Tarikh Daftar (SKM)</label>
            <input type="date" name="tarikh_daftar"
                value="{{ old('tarikh_daftar', optional($koop->tarikh_daftar)->format('Y-m-d')) }}"
                class="h-10 w-full mt-2 mb-4 px-3 border border-slate-300 rounded-full
                        outline-none focus:ring-2 focus:ring-indigo-400 transition">

            <label class="font-medium">Alamat Berdaftar</label>
            <textarea name="alamat_berdaftar" rows="3"
                    class="w-full mt-2 mb-4 p-2 border border-slate-300 rounded-lg
                            resize-none outline-none focus:ring-2 focus:ring-indigo-400 transition">{{ old('alamat_berdaftar', $koop->alamat_berdaftar) }}</textarea>

            <label class="font-medium mb-1">Alamat Surat Menyurat</label>

            <label class="font-medium">Line 1</label>
            <input type="text" name="alamat_line_1"
                value="{{ old('alamat_line_1', $koop->alamat_line_1) }}"
                class="h-10 w-full mt-2 mb-4 px-3 border border-slate-300 rounded-full
                        outline-none focus:ring-2 focus:ring-indigo-400 transition">

            <label class="font-medium">Line 2</label>
            <input type="text" name="alamat_line_2"
                value="{{ old('alamat_line_2', $koop->alamat_line_2) }}"
                class="h-10 w-full mt-2 mb-4 px-3 border border-slate-300 rounded-full
                        outline-none focus:ring-2 focus:ring-indigo-400 transition">

            <label class="font-medium">Poskod</label>
            <input type="text" name="poskod"
                value="{{ old('poskod', $koop->poskod) }}"
                class="h-10 w-full mt-2 mb-4 px-3 border border-slate-300 rounded-full
                        outline-none focus:ring-2 focus:ring-indigo-400 transition">

            <label class="font-medium">Bandar</label>
            <input type="text" name="bandar"
                value="{{ old('bandar', $koop->bandar) }}"
                class="h-10 w-full mt-2 mb-4 px-3 border border-slate-300 rounded-full
                        outline-none focus:ring-2 focus:ring-indigo-400 transition">

            <label class="font-medium">Negeri</label>
            <select name="negeri" required
                    class="h-10 w-full mt-2 mb-4 px-3 border border-slate-300 rounded-full
                        outline-none focus:ring-2 focus:ring-indigo-400 transition">
                <option value="">-- Pilih Negeri --</option>

                @php
                    $negeriList = [
                        'Kedah Darul Aman',
                        'Perlis Indera Kayangan',
                        'Pulau Pinang',
                        'Perak Darul Ridzuan',
                        'Selangor Darul Ehsan',
                        'WP Kuala Lumpur',
                        'Johor Darul Ta\'zim',
                        'Pahang Darul Makmur',
                        'Kelantan Darul Naim',
                        'Terengganu Darul Iman',
                        'Sabah',
                        'Sarawak',
                    ];
                @endphp

                @foreach($negeriList as $n)
                    <option value="{{ $n }}"
                        {{ old('negeri', $koop->negeri) === $n ? 'selected' : '' }}>
                        {{ $n }}
                    </option>
                @endforeach
            </select>

            <label class="font-medium">Daerah / Cawangan</label>
            <input type="text" name="district"
                value="{{ old('district', $koop->district) }}"
                class="h-10 w-full mt-2 mb-4 px-3 border border-slate-300 rounded-full
                        outline-none focus:ring-2 focus:ring-indigo-400 transition">

            <label class="font-medium">No. Telefon (WhatsApp)</label>
            <input type="text" name="phone"
                value="{{ old('phone', $user->phone) }}"
                class="h-10 w-full mt-2 mb-4 px-3 border border-slate-300 rounded-full
                        outline-none focus:ring-2 focus:ring-indigo-400 transition">

            <label class="font-medium">Emel Koperasi</label>
            <input type="email" name="email"
                value="{{ old('email_alt', $user->email) }}"
                class="h-10 w-full mt-2 mb-6 px-3 border border-slate-300 rounded-full
                        outline-none focus:ring-2 focus:ring-indigo-400 transition">

            <!-- ===================== -->
            <!-- MAKLUMAT PENGURUSAN -->
            <!-- ===================== -->
            <h2 class="text-indigo-600 font-semibold mb-4 mt-6">Maklumat Pengurusan</h2>

            <label class="font-medium">Fungsi Koperasi</label>
            <select name="fungsi_koperasi"
                    class="h-10 w-full mt-2 mb-4 px-3 border border-slate-300 rounded-full
                        outline-none focus:ring-2 focus:ring-indigo-400 transition">
                <option value="">-- Pilih Fungsi --</option>

                @php
                    $fungsiList = [
                        'Pengguna',
                        'Perkhidmatan',
                        'Pertanian',
                        'Kewangan dan perbankan',
                        'Pengangkutan',
                        'Perindustrian',
                        'Pembinaan',
                        'Pelbagai',
                    ];
                @endphp

                @foreach($fungsiList as $f)
                    <option value="{{ $f }}"
                        {{ old('fungsi_koperasi', $koop->fungsi_koperasi) === $f ? 'selected' : '' }}>
                        {{ $f }}
                    </option>
                @endforeach
            </select>

            <label class="font-medium">Aktiviti Koperasi</label>
            <textarea name="aktiviti_koperasi" rows="3"
                    class="w-full mt-2 mb-4 p-2 border border-slate-300 rounded-lg
                            resize-none outline-none focus:ring-2 focus:ring-indigo-400 transition">{{ old('aktiviti_koperasi', $koop->aktiviti_koperasi) }}</textarea>

            <label class="font-medium">Kawasan Operasi</label>
            <input type="text" name="kawasan_operasi"
                value="{{ old('kawasan_operasi', $koop->kawasan_operasi) }}"
                class="h-10 w-full mt-2 mb-6 px-3 border border-slate-300 rounded-full
                        outline-none focus:ring-2 focus:ring-indigo-400 transition">

            <!-- ===================== -->
            <!-- KEAHLIAN & MODAL -->
            <!-- ===================== -->
            <h2 class="text-indigo-600 font-semibold mb-4">Keahlian & Modal</h2>

            <label class="font-medium">Minimum Bilangan ALK</label>
            <input type="number" name="min_bilangan_alk" min="1" required
                value="{{ old('min_bilangan_alk', $koop->min_bilangan_alk) }}"
                class="h-10 w-full mt-2 mb-4 px-3 border border-slate-300 rounded-full
                        outline-none focus:ring-2 focus:ring-indigo-400 transition">

            <label class="font-medium">Minimum Syer Anggota (RM)</label>
            <input type="number" name="min_syer" step="0.01" min="0" required
                value="{{ old('min_syer', $koop->min_syer) }}"
                class="h-10 w-full mt-2 mb-4 px-3 border border-slate-300 rounded-full
                        outline-none focus:ring-2 focus:ring-indigo-400 transition">

            <label class="font-medium">Fi Kemasukan (RM)</label>
            <input type="number" name="fi_kemasukan" step="0.01" min="0"
                value="{{ old('fi_kemasukan', $koop->fi_kemasukan) }}"
                class="h-10 w-full mt-2 mb-6 px-3 border border-slate-300 rounded-full
                        outline-none focus:ring-2 focus:ring-indigo-400 transition">

            <button class="mt-6 bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-medium transition">
                Simpan Perubahan
            </button>
        </form>

        {{-- ===================== LOGO KOPERASI ===================== --}}
        <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm mt-6">

            <h3 class="text-lg font-semibold text-gray-800 mb-4">
                🏷️ Logo Koperasi
            </h3>

            <div class="flex items-start gap-6" x-data="{ preview: null }">

                {{-- Logo Preview --}}
                <div
                    class="w-28 h-28 border border-dashed border-gray-300 rounded-lg
                        flex items-center justify-center overflow-hidden bg-gray-50">
                    <template x-if="preview">
                        <img :src="preview" class="object-contain w-full h-full">
                    </template>

                    <template x-if="!preview">
                        @if($koop->logo)
                            <img src="{{ url('storage-file/'.$koop->logo) }}">
                                class="object-contain w-full h-full">
                        @else
                            <span class="text-gray-400 text-sm text-center px-2">
                                Tiada Logo
                            </span>
                        @endif
                    </template>
                </div>

                {{-- Upload Form --}}
                <form
                    action="{{ route('profile.logo.update') }}"
                    method="POST"
                    enctype="multipart/form-data"
                    class="flex flex-col gap-3"
                >
                    @csrf

                    <input
                        type="file"
                        name="logo"
                        accept="image/*"
                        @change="const file = $event.target.files[0]; if (file) preview = URL.createObjectURL(file)"
                        class="block w-full text-sm text-gray-600
                            file:mr-3 file:py-1.5 file:px-3
                            file:rounded-md file:border-0
                            file:bg-indigo-50 file:text-indigo-700
                            hover:file:bg-indigo-100"
                    >

                    <button
                        type="submit"
                        class="w-fit bg-indigo-600 hover:bg-indigo-700
                            text-white px-5 py-2 rounded-lg
                            text-sm font-medium transition"
                    >
                        Muat Naik Logo
                    </button>
                </form>

            </div>
        </div>

        {{-- ===================== SIJIL LAHIR ===================== --}}
        <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm mt-6">

            <h3 class="text-lg font-semibold text-gray-800 mb-4">
                📄 Sijil Lahir Koperasi (PDF)
            </h3>

            <div class="flex flex-wrap items-center gap-6">

                {{-- Existing PDF --}}
                <div class="text-sm">
                    @if($koop->sijil_lahir)
                        <a
                            href="{{ url('storage-file/'.$koop->sijil_lahir) }}" 
                            target="_blank"
                            class="text-indigo-600 hover:underline font-medium"
                        >
                            Lihat Sijil Sedia Ada
                        </a>
                    @else
                        <span class="text-gray-400">Belum dimuat naik</span>
                    @endif
                </div>

                {{-- Upload Form --}}
                <form
                    action="{{ route('profile.sijil-lahir.update') }}"
                    method="POST"
                    enctype="multipart/form-data"
                    class="flex items-center gap-3"
                >
                    @csrf

                    <input
                        type="file"
                        name="sijil_lahir"
                        accept="application/pdf"
                        class="block text-sm text-gray-600
                            file:mr-3 file:py-1.5 file:px-3
                            file:rounded-md file:border-0
                            file:bg-indigo-50 file:text-indigo-700
                            hover:file:bg-indigo-100"
                    >

                    <button
                        type="submit"
                        class="bg-indigo-600 hover:bg-indigo-700
                            text-white px-5 py-2 rounded-lg
                            text-sm font-medium transition"
                    >
                        Muat Naik PDF
                    </button>
                </form>

            </div>
        </div>

        {{-- ===================== UUK ===================== --}}
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm mt-6">

    <h3 class="text-lg font-semibold text-gray-800 mb-4">
        📘 Undang-Undang Kecil (UUK)
    </h3>

    <div class="flex flex-wrap items-center gap-6">

        {{-- Existing PDF --}}
        <div class="text-sm">
            @if($koop->uuk)
                <a href="{{ url('storage-file/'.$koop->uuk) }}"
                   target="_blank"
                   class="text-indigo-600 hover:underline font-medium">
                    Lihat UUK Sedia Ada
                </a>
            @else
                <span class="text-gray-400">Belum dimuat naik</span>
            @endif
        </div>

        {{-- Upload Form --}}
        <form action="{{ route('profile.uuk.update') }}"
              method="POST"
              enctype="multipart/form-data"
              class="flex items-center gap-3">
            @csrf

            <input type="file"
                   name="uuk"
                   accept="application/pdf"
                   class="block text-sm text-gray-600
                          file:mr-3 file:py-1.5 file:px-3
                          file:rounded-md file:border-0
                          file:bg-indigo-50 file:text-indigo-700
                          hover:file:bg-indigo-100">

            <button type="submit"
                    class="bg-indigo-600 hover:bg-indigo-700
                           text-white px-5 py-2 rounded-lg
                           text-sm font-medium transition">
                Muat Naik UUK
            </button>
        </form>

    </div>
</div>
    </div>

    <!-- 🔑 Kata Laluan -->
    <div class="bg-white border border-gray-200 shadow-sm rounded-xl p-6 space-y-6">
        @include('profile.partials.update-password-form')
    </div>

    <!-- 🗑️ Padam Akaun -->
    <div class="bg-white border border-gray-200 shadow-sm rounded-xl p-6 space-y-6">
        @include('profile.partials.delete-user-form')
    </div>

    <!-- ✅ Success Toast -->
    @if (session('status'))
        <div x-data="{ show: true }" x-show="show" x-transition 
                x-init="setTimeout(() => show = false, 3000)"
                class="fixed bottom-6 right-6 bg-green-500 text-white px-4 py-2 rounded-lg shadow-md">
            @switch(session('status'))
                @case('profile-updated')
                    Maklumat akaun berjaya dikemaskini!
                    @break
                @case('koop-updated')
                    Maklumat koperasi berjaya dikemaskini!
                    @break
                @case('logo-updated')
                    Logo koperasi berjaya dikemaskini!
                    @break
                @case('sijil-lahir-updated')
                    Sijil lahir koperasi berjaya dimuat naik!
                    @break
            @endswitch
        </div>
    @endif
</div>

@endsection