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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<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-radius: 10px;
        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> Account Information Edit</h4>


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

            @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            <form action="{{ route('othermember.info.update', $member->id) }}" method="POST">
                @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>GSS Number </label>
                        <input type="text" name="gss_number" value="{{$member->gss_number}}"
                            class="form-control">
                    </div>

                    <div class="col-md-6">
                        <label>Account Number </label>
                        <input type="text" name="account_number" value="{{$member->account_number}}"
                            class="form-control" readonly>
                    </div>

                </div>
                <div class="row mb-3">

                    <div class="col-md-6">
                        <label>A/C Holder Name</label>
                        <input type="text" name="member_name" value="{{$member->acc_holder}}" class="form-control" readonly>
                    </div>

                    <div class="col-md-6">
                        <label>Opening Date</label>
                           <input type="text"
                           name="opening_date"
                           value="{{ \Carbon\Carbon::parse($member->opening_date)->format('d-m-Y') }}"
                           class="form-control"
                           id="opening_date">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label>Installment / Deposit</label>
                        <input type="text" name="deposit" value="{{$member->deposit_amount}}" class="form-control">
                    </div>

                    <div class="col-md-6">
                        <label>Profit</label>
                        <input type="text" name="profit" value="{{$member->profit}}" 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> Change Information </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    flatpickr("#opening_date", {
        dateFormat: "d-m-Y",
        allowInput: true
    });
</script>

@endsection