@extends('layouts.master')

@section('title', 'Provident Fund')

@section('style')

@endsection

@section('script')

@endsection

@section('content')

    @include('layouts.header')
    @include('layouts.header-sub')

    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <div class="row gx-lg-8 gx-xl-12">

                <div class="col-lg-12">
                    <div class="blog single">
                        <div class="card">
                            <div class="card-body">

                                <form action="{{ url('/providentfundedit') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="user_user_id" value="{{ $users->id }}">

                                    <div class="card">
                                        <div class="card-body">

                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <h5 class="card-title mb-0 fw-bold d-flex align-items-center text-dark"
                                                    style="font-size: 1.1rem;">
                                                    <i class="uil uil-user-check me-2" style="color: #747ED1 !important">
                                                    </i> Member Information
                                                </h5>
                                                <span class="badge bg-pale-violet text-violet rounded-pill fs-14">
                                                    Register Member
                                                </span>
                                            </div>
                                            <hr class="text-muted opacity-25 my-3">

                                            <div class="row g-4">
                                                <div class="col-md-6">
                                                    <label
                                                        class="form-label fw-semibold text-secondary small mb-1">Registration
                                                        Date
                                                        <span class="text-danger">*</span></label>
                                                    <div class="input-group">
                                                        <input type="date" class="form-control bg-white"
                                                            name="register_date" value="{{ $users->register_date ?? '' }}"
                                                            placeholder="วว/ดด/ปปปป">
                                                    </div>
                                                    <div class="form-text text-muted small mt-1">Date the member joined the
                                                        fund
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="form-label fw-semibold text-secondary small mb-1">Member
                                                        No.
                                                        <span class="text-danger">*</span></label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control bg-white" name="member_no"
                                                            value="{{ $users->member_no ?? '' }}"
                                                            placeholder="e.g. PF-2024-0001">
                                                    </div>
                                                    <div class="form-text text-muted small mt-1">Unique member identifier
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <br>

                                    <div class="card bg-purple text-white border-0 shadow-sm rounded-3"
                                        data-bs-theme="dark">
                                        <div class="card-body p-4 p-md-5">

                                            <h5 class="card-title mb-2 fw-bold d-flex align-items-center text-white"
                                                style="font-size: 1.1rem;">
                                                <i class="uil uil-percentage me-2" style="color: #ffffff !important"></i>
                                                Contribution Rate
                                            </h5>
                                            <hr class="text-white opacity-25 my-3">

                                            <div class="row g-4">
                                                <div class="col-md-6">
                                                    <label class="form-label fw-semibold text-white small mb-1">Member
                                                        Contribution Rate
                                                        <span class="text-warning">*</span></label>
                                                    <div class="input-group">
                                                        <input type="number" class="form-control"
                                                            value="{{ $users->member_contribution_rate ?? 3 }}"
                                                            name="member_contribution_rate" step="0.01">
                                                        <span class="input-group-text text-dark">%</span>
                                                    </div>
                                                    <div class="form-text text-white-50 small mt-1">Employee's contribution
                                                        percentage
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="form-label fw-semibold text-white small mb-1">SIIT
                                                        Contribution Rate
                                                        <span class="text-warning">*</span></label>
                                                    <div class="input-group">
                                                        <input type="number" class="form-control"
                                                            value="{{ $users->siit_contribution_rate ?? 2 }}"
                                                            name="siit_contribution_rate" step="0.01">
                                                        <span class="input-group-text text-dark">%</span>
                                                    </div>
                                                    <div class="form-text text-white-50 small mt-1">Employer's contribution
                                                        percentage
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <br>

                                    <div class="text-center">
                                        <button type="submit" class="btn btn-primary rounded-pill px-4">
                                            Save Member
                                        </button>
                                        <a href="{{ url('/provident_fund/' . $users->id) }}"
                                            class="btn btn-red rounded-pill px-4 ms-2">
                                            Cancel
                                        </a>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    @include('layouts.footer')

@endsection