@extends('layouts.app')

@section('title', 'Payment Detail')

@push('css')
    <style>
        .profile-userpic img {
            float: none;
            margin: 0 auto;
            width: 50%;
            height: 50%;
            -webkit-border-radius: 50% !important;
            -moz-border-radius: 50% !important;
            border-radius: 50% !important;
        }
    </style>
@endpush

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3 d-print-none">
        <h1 class="page-header mb-0">Payment Management</h1>
    </div>
    <div class="row">
        <div class="col-md-3">
            @include('payment.customerOverview')
        </div>
        <div class="col-md-9">
            <div class="card">
                <form action="{{ route('payment-item.update', $item) }}" method="POST">
                    <div class="card-header">Payment Item</div>
                    <div class="card-body p-4">
                        @method('PUT')
                        @csrf
                        <div class="card-body p-4">
                            <div class="row mb-4">
                                <label for="card_no" class="col-form-label fw-semibold text-muted col-md-3">Card No.</label>
                                <div class="col-md-9">
                                    <div class="col-md-6">
                                        <input type="text"
                                               @class(['form-control', 'is-invalid' => $errors->has('card_no')])
                                               id="card_no"
                                               name="card_no"
                                               value="{{ old('card_no', $item->card_no) }}">
                                    </div>

                                    @error('card_no')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-4">
                                <label for="site_id" class="col-form-label fw-semibold text-muted col-md-3">Site ID</label>
                                <div class="col-md-9">
                                    <div class="col-md-6">
                                        <input type="text"
                                               @class(['form-control', 'is-invalid' => $errors->has('site_id')])
                                               id="site_id"
                                               name="site_id"
                                               value="{{ old('site_id', $item->site_id) }}">
                                    </div>

                                    @error('site_id')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-4">
                                <label for="year" class="col-form-label fw-semibold text-muted col-md-3">Year</label>
                                <div class="col-md-9">
                                    <div class="col-md-6">
                                        <input type="text"
                                               @class(['form-control', 'is-invalid' => $errors->has('year')])
                                               id="year"
                                               name="year"
                                               value="{{ old('year', $item->year) }}">
                                    </div>

                                    @error('year')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-4">
                                <label for="month" class="col-form-label fw-semibold text-muted col-md-3">Month</label>
                                <div class="col-md-9">
                                    <div class="col-md-6">
                                        <select name="month"
                                                @class(['form-select', 'is-invalid' => $errors->has('month')])
                                                id="month"
                                                placeholder="Example: {{ now()->month }}">
                                            @foreach($periods as $period)
                                                <option value="{{ $period->month }}" @selected(old('month', $item->month) == $period->month)>
                                                    {{ $period->format('M') }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    @error('month')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-4">
                                <label for="payment_for" class="col-form-label fw-semibold text-muted col-md-3">Payment For</label>
                                <div class="col-md-9">
                                    <div class="col-md-6">
                                        <input type="text"
                                               @class(['form-control', 'is-invalid' => $errors->has('payment_for')])
                                               id="payment_for"
                                               name="payment_for"
                                               value="{{ old('payment_for', $item->payment_for) }}">
                                    </div>

                                    @error('payment_for')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-4">
                                <label for="card_holder_name" class="col-form-label fw-semibold text-muted col-md-3">Card Holder Name</label>
                                <div class="col-md-9">
                                    <div class="col-md-6">
                                        <input type="text"
                                               @class(['form-control', 'is-invalid' => $errors->has('card_holder_name')])
                                               id="card_holder_name"
                                               name="card_holder_name"
                                               value="{{ old('card_holder_name', $item->card_holder_name) }}">
                                    </div>

                                    @error('card_holder_name')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-4">
                                <label for="card_holder_email" class="col-form-label fw-semibold text-muted col-md-3">Card Holder Name</label>
                                <div class="col-md-9">
                                    <div class="col-md-6">
                                        <input type="text"
                                               @class(['form-control', 'is-invalid' => $errors->has('card_holder_email')])
                                               id="card_holder_email"
                                               name="card_holder_email"
                                               value="{{ old('card_holder_email', $item->card_holder_email) }}">
                                    </div>

                                    @error('card_holder_email')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-4">
                                <label for="amount" class="col-form-label fw-semibold text-muted col-md-3">Amount</label>
                                <div class="col-md-9">
                                    <div class="col-md-6">
                                        <div class="input-group">
                                            <span class="input-group-text" id="payment-amount">RM</span>
                                            <input type="text"
                                                   @class(['form-control', 'is-invalid' => $errors->has('amount')])
                                                   id="amount"
                                                   name="amount"
                                                   aria-describedby="payment-amount"
                                                   value="{{ old('amount', $payment->amount) }}">
                                        </div>
                                    </div>

                                    @error('amount')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-end">
                        <a href="{{ route('payment.show', $payment) }}" class="btn btn-white">Back</a>
                        <button type="submit" class="btn btn-primary">Confirm Changes</button>
                    </div>
                </form>
            </div> <!--/.card -->
        </div> <!--/.col-md-9 -->
    </div> <!--/.row -->

@endsection