@extends('layouts.app')

@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')
<h1 class="page-header">Edit Profile</h1>
<div class="row">
    <div class="col-md-3">
        @include('customer.menu')
    </div>
    <div class="col-md-9">
        <div class="card mb-3 border-0">
            @include('customer.tab')
            <form action="{{ route('customer.update', $customer->id) }}" method="POST">
                @method('PUT')
                @csrf
                <div class="card-body p-4">
                    <div class="row mb-4">
                        <label for="name" class="col-form-label fw-semibold text-muted col-md-3">Nama</label>
                        <div class="col-md-9">
                            <input type="text" id="name" name="name" value="{{ old('name', $customer->name) }}" class="form-control @error('name') is-invalid @enderror">
                            @error('name')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-4">
                        <label for="nric" class="col-form-label fw-semibold text-muted col-md-3">IC No.</label>
                        <div class="col-md-9">
                            <input type="text" id="ic_no" name="ic_no" value="{{ $customer->ic_no ?? $customer->cardHolder?->nric ?? '' }}" class="form-control @error('ic_no') is-invalid @enderror">
                            @error('ic_no')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-4">
                        <label for="mobile" class="col-form-label fw-semibold text-muted col-md-3">Mobile No.</label>
                        <div class="col-md-9">
                            <input type="text" id="mobile" name="mobile" value="{{ $customer?->cardHolder?->mobile ?? '' }}" class="form-control @error('mobile') is-invalid @enderror">
                            @error('mobile')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-4">
                        <label for="email" class="col-form-label fw-semibold text-muted col-md-3">Email</label>
                        <div class="col-md-9">
                            <input type="email" id="email" name="email" value="{{ $customer->email ?? $customer->cardHolder?->email }}" class="form-control @error('email') is-invalid @enderror">
                            @error('email')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-4">
                        <label for="email_alt" class="col-form-label fw-semibold text-muted col-md-3">Alternate Email</label>
                        <div class="col-md-9">
                            <input type="email" id="email_alt" name="email_alt" value="{{ $customer?->cardHolder?->email_alt ?? '' }}" class="form-control @error('email_alt') is-invalid @enderror">
                            @error('email_alt')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-4">
                        <label for="address" class="col-form-label fw-semibold text-muted col-md-3">Address</label>
                        <div class="col-md-9">
                            <textarea name="address" id="address" cols="30" rows="4" class="form-control @error('address') is-invalid @enderror">{{ old('address', $customer?->cardHolder?->address ?? '') }}</textarea>
                            @error('address')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-4">
                        <label for="car_no_1" class="col-form-label fw-semibold text-muted col-md-3">Car Plate No. I</label>
                        <div class="col-md-9">
                            <input type="text" id="car_no_1" name="car_no_1" value="{{ $customer?->cardHolder?->car_no_1 ?? '' }}" class="form-control @error('car_no_1') is-invalid @enderror">
                            @error('car_no_1')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-4">
                        <label for="car_no_2" class="col-form-label fw-semibold text-muted col-md-3">Car Plate No. II</label>
                        <div class="col-md-9">
                            <input type="text" id="car_no_2" name="car_no_2" value="{{ $customer?->cardHolder?->car_no_2 ?? '' }}" class="form-control @error('car_no_2') is-invalid @enderror">
                            @error('car_no_2')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="card-footer text-end">
                    <a href="{{ route('user.index') }}" class="btn btn-white">Back</a>
                    <button type="submit" class="btn btn-primary">Confirm Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection