@extends('admin_dashboard')
@section('admin')

<style>
    body {
        background: #f4f7f9;
        font-family: 'Segoe UI', sans-serif;
    }

    .card {
        border: none;
        border-radius: 16px;
    }

    .card-header {
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    label {
        font-weight: 500;
        color: #333;
    }

    input.form-control {
        border: 1px solid #cdd6df;
        box-shadow: none !important;
    }

    input.form-control:focus {
        border-color: #198754;
        box-shadow: 0 0 5px rgba(25, 135, 84, 0.3);
    }

    h5 {
        font-size: 1.05rem;
        font-weight: 600;
    }

    button.btn-success {
        border-radius: 10px;
        font-weight: 600;
        transition: 0.3s;
    }

    button.btn-success:hover {
        background-color: #157347;
        transform: translateY(-2px);
    }
</style>
<div class="container my-3">

    <div class="card shadow-lg">
        <div class="card-header bg-success text-white text-center py-3">
            <h4 class="mb-0"><i class="bi bi-bank"></i> Saving Account Opening</h4>

        </div>
        <div class="card-body p-4">

            @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            <form action="{{ route('member.info.store') }}" method="POST" enctype="multipart/form-data">

                @csrf
                <h5 class="text-success border-bottom pb-2 mb-3"><i class="bi bi-credit-card-2-front"></i> Account
                    Information</h5>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label>Account Number</label><input type="text"
                            name="account_number" id="account_number" class="form-control" readonly placeholder="Select a group to generate">
                    </div>

                    <div class="col-md-6"><label>Opening Date</label>
                        <input type="text" name="opening_date"  id="opening_date" class="form-control">
                    </div>
                </div>
                <div class="row mb-3">

                    <div class="col-md-6"><label>A/C Holder Name</label><input type="text" name="member_name"
                            class="form-control"></div>
                    <div class="col-md-6">
                        <label>Group Name</label>
                        <input type="text" name="pid_name" id="pid_name" class="form-control" list="group-list" autocomplete="off">
                        <datalist id="group-list">
                            @foreach($groups as $group)
                            <option value="{{ $group->group_name }}">
                            @endforeach
                        </datalist>
                    </div>
                </div>
                <h5 class="text-success border-bottom pb-2 mb-3 mt-4">
                    <i class="bi bi-person-lines-fill"></i> Personal Information
                </h5>
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="photo" class="form-label">Photo</label>
                        <input type="file" name="image" id="image" class="form-control @error('image') is-invalid @enderror" onchange="ceo_photo_image(this)">
                        @error('image')
                            <span class="text-danger"> {{ $message }} </span>
                        @enderror
                    </div>
                
                    <div class="col-md-3">
                        <img id="ceo_photo_blah" src="{{ !empty($adminData->image) ? url('upload/admin_image/'.$adminData->image) : url('upload/no_image.jpg') }}" class="rounded-circle avatar-lg img-thumbnail" alt="profile-image">
                    </div>

                    <div class="col-md-3">
                        <label for="photo" class="form-label">Signature</label>
                        <input type="file" name="signature" id="signature" class="form-control @error('signature') is-invalid @enderror" onchange="ceo_signature_image(this)">
                        @error('signature')
                            <span class="text-danger"> {{ $message }} </span>
                        @enderror
                    </div>
                
                    <div class="col-md-3">
                        <img id="ceo_signature_blah" src="{{ !empty($adminData->signature) ? url('upload/admin_image/'.$adminData->image) : url('upload/no_image.jpg') }}" class="rounded-circle avatar-lg img-thumbnail" alt="profile-image">
                    </div>

                </div>
                <div class="row mb-3">
                    <div class="col-md-6"><label>Father/Husband's Name</label>
                        <input type="text" name="fat_hus_name" class="form-control">
                    </div>
                    <div class="col-md-6"><label>Mother's Name</label>
                        <input type="text" name="mother_name" class="form-control">
                    </div>
                </div>
                <div class="row mb-3">

                    <div class="col-md-12"><label>Address</label>
                        <textarea type="text" name="member_address" class="form-control"></textarea>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6"><label>Date of Birth</label>
                        <input type="text" name="member_dob" id="member_dob" class="form-control">
                    </div>
                    <div class="col-md-6"><label>NID Number</label><input type="text" name="member_nid"
                            class="form-control">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6"><label>Occupation</label><input type="text" name="member_occupation"
                            class="form-control"></div>
                    <div class="col-md-6"><label>Mobile Number</label><input type="text" name="member_mobile"
                            class="form-control"></div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label>Gender</label>
                        <select name="member_gender" class="form-control">
                            <option value="">-- Select Gender --</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label>Marital Status</label>
                        <select name="member_marital_status" class="form-control">
                            <option value="">-- Select Marital Status --</option>
                            <option value="Single">Single</option>
                            <option value="Married">Married</option>
                            <option value="Divorced">Divorced</option>
                            <option value="Widowed">Widowed</option>
                        </select>
                    </div>
                </div>

                <h5 class="text-success border-bottom pb-2 mb-3 mt-4">
                    <i class="bi bi-person-heart"></i> Nominee Information
                </h5>
                <div class="row mb-3">
                    <div class="col-md-6"><label>Nominee Name</label><input type="text" name="nominee_name"
                            class="form-control"></div>
                    <div class="col-md-6"><label>Father/Husband's Name</label>
                        <input type="text" name="nominee_fat_hus_name" class="form-control">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6"><label>Mother's Name</label>
                        <input type="text" name="nominee_mother_name" class="form-control">
                    </div>
                    <div class="col-md-6"><label>Address</label><input type="text" name="nominee_address"
                            class="form-control">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6"><label>Date of Birth</label>
                        <input type="text" name="nominee_dob" id="nominee_dob" class="form-control">
                    </div>
                    <div class="col-md-6"><label>Relation</label><input type="text" name="nominee_relation"
                            class="form-control"></div>
                </div>
                <div class="row mb-4">
                    <div class="col-md-6"><label>Mobile Number</label><input type="text" name="nominee_mobile"
                            class="form-control"></div>
                    <div class="col-md-6"><label>Percent (%)</label><input type="number" name="nominee_percent"
                            class="form-control"></div>
                </div>
                <div class="text-center"><button type="submit" class="btn btn-success px-5 py-2"><i
                            class="bi bi-save2"></i> Save
                        Information </button></div>
            </form>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const today = new Date();
        const day = String(today.getDate()).padStart(2, '0');
        const month = String(today.getMonth() + 1).padStart(2, '0');
        const year = today.getFullYear();

        document.getElementById('opening_date').value = `${day}-${month}-${year}`;
        document.getElementById('member_dob').value = `${day}-${month}-${year}`;
        document.getElementById('nominee_dob').value = `${day}-${month}-${year}`;
    });
</script>

<script>
    function ceo_photo_image(input) {
        if (input.files && input.files[0]) {
            document.getElementById('ceo_photo_blah').src = window.URL.createObjectURL(input.files[0]);
        }
    }

    function ceo_signature_image(input) {
        if (input.files && input.files[0]) {
            document.getElementById('ceo_signature_blah').src = window.URL.createObjectURL(input.files[0]);
        }
    }
</script>

<script>
    document.getElementById('pid_name').addEventListener('change', function () {
        const groupName = this.value.trim();
        if (!groupName) return;

        fetch('{{ route('member.info.next-account-number') }}?group_name=' + encodeURIComponent(groupName))
            .then(response => response.json())
            .then(data => {
                document.getElementById('account_number').value = data.account_number || '';
            });
    });
</script>

@endsection