@extends('dashlayouts.app')

@section('content')
    <div class="pagetitle">
        <h1>Profile</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Utama</a></li>
                <li class="breadcrumb-item active">Profil</li>
            </ol>
        </nav>
    </div>
    <section class="section">
        @include('errors')
        @include('layouts.messages')
        <div class="row">
            <div class="col-md-9">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Profil Pengguna <span>| Informasi</span></h5>
                        <form action="{{ route('user.updateprofile') }}" method="POST" enctype="multipart/form-data" data-parsley-validate>
                            @csrf
                            <div class="mb-3 row">
                                <label for="idno" class="col-sm-3 col-form-label">MyKad / Passport<span style="color: red">*</span></label>
                                <div class="col-sm-9">
                                    <p class="form-control-plaintext"><strong>{{ $user->idno }}</strong></p>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="name" class="col-sm-3 col-form-label">Nama<span style="color: red">*</span></label>
                                <div class="col-sm-9">
                                    <p class="form-control-plaintext"><strong>{{ $user->name }}</strong></p>
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <label for="email" class="col-sm-3 col-form-label">Emel<span style="color: red">*</span></label>
                                <div class="col-sm-9">
                                    <p class="form-control-plaintext"><strong>{{ $user->email }}</strong></p>
                                </div>
                            </div>
                            <br>

                            <div class="mb-3">
                                <label for="add1" class="form-label">Alamat 1<span style="color: red">*</span></label>
                                <input id="add1" type="text" class="form-control @error('add1') is-invalid @enderror" 
                                       name="add1" value="{{ $user->add1 }}" required style="text-transform: uppercase" 
                                       data-parsley-trigger="change" oninput="this.value = this.value.toUpperCase()"
                                       data-parsley-maxlength="100"
                                       data-parsley-error-message="Please enter a valid address of at least 10 characters.">
                                @error('add1')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="add2" class="form-label">Alamat 2<span style="color: red">*</span></label>
                                <input id="add2" type="text" class="form-control @error('add2') is-invalid @enderror" 
                                       name="add2" value="{{ $user->add2 }}" required style="text-transform: uppercase" 
                                       data-parsley-trigger="change" data-parsley-maxlength="100" oninput="this.value = this.value.toUpperCase()"
                                       data-parsley-error-message="Please enter a valid address of at least 10 characters.">
                                @error('add2')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="city" class="form-label">Bandar<span style="color: red">*</span></label>
                                <input id="city" type="text" class="form-control @error('city') is-invalid @enderror" 
                                       name="city" value="{{ $user->city }}" required style="text-transform: uppercase" 
                                       data-parsley-trigger="change" data-parsley-maxlength="150" oninput="this.value = this.value.toUpperCase()"
                                       data-parsley-error-message="Please enter a valid address of at least 10 characters.">
                                @error('city')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="postcode" class="form-label">Poskod<span style="color: red">*</span></label>
                                <input id="postcode" type="text" class="form-control @error('postcode') is-invalid @enderror" 
                                       name="postcode" value="{{ $user->postcode }}" required 
                                       data-parsley-trigger="change"  data-parsley-maxlength="5"
                                       data-parsley-type="digits" data-parsley-length="[5, 5]"
                                        data-parsley-error-message="Postcode 5 digits only">
                                @error('postcode')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="mb-3">
                                {{-- <label for="state" class="form-label">State<span style="color: red">*</span></label>
                                <input id="state" type="text" class="form-control @error('state') is-invalid @enderror" 
                                       name="state" value="{{ $user->state }}" required style="text-transform: uppercase" 
                                       data-parsley-trigger="change" oninput="this.value = this.value.toUpperCase()"
                                       data-parsley-error-message="Please enter a valid address of at least 10 characters.">
                                @error('state')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror --}}
                                <label for="state"> Negeri: <span class="text-danger">*</span></label>
                                <select name="state" class="form-control" required>
                                    <option value="">Pilih Negeri</option>
                                    @foreach ($states as $state)
                                        <option value="{{ $state->shortname }}"
                                            {{ $user->state ?? ''  == $state->shortname ? 'selected' : '' }}>
                                            {{ $state->shortname }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="mobile_no" class="form-label">Nombor Hp<span style="color: red">*</span></label>
                                <input id="mobile_no" type="tel" class="form-control @error('mobile_no') is-invalid @enderror" 
                                       name="mobile_no" value="{{ $user->mobile_no }}" required 
                                       data-parsley-type="digits"
                                       data-parsley-length="[10, 15]"
                                       data-parsley-trigger="change" 
                                       data-parsley-error-message="Please enter a valid mobile number with 10 to 15 digits.">
                                @error('mobile_no')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>                       
                            
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary btn-lg px-4 py-2 mt-2 rounded-pill shadow-sm">
                                    Kemaskini
                                </button>
                            </div>
                        </form>
                        <p class="text-muted text-end">
                            Tarikh sertai: {{ $user->created_at->format('F j, Y') }}
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Langganan <span class="text-muted">| Jenis Langganan</span></h5>
                        <div class="d-flex flex-column align-items-center">
                            <!-- Account Type Display -->
                            <div class="mb-3 text-center">
                                <!-- Images representing subscription types -->
                                @if($user->subscription_type === 'PREMIUM')
                                    <img src="{{ asset('img/premium.png') }}" alt="Premium" class="img-fluid pt-3" style="max-width: 150px;">
                                    <p class="mt-2 fs-4 text-center">
                                        <b>Premium</b>
                                    </p>
                                    <p class="text-muted text-end">
                                        Sejak: {{ $user->subscription_date ?? $user->created_at }}
                                    </p>
                                @else
                                    <img src="{{ asset('img/free.png') }}"  alt="Free" class="img-fluid pt-3" style="max-width: 150px;">
                                    <p class="mt-2 fs-4 text-center">
                                        <b>Free</b>
                                    </p>
                                @endif
                            </div>
                            <!-- Upgrade Button -->
                            @if($user->subscription_type !== 'PREMIUM')
                            <a href="{{ route('transaction.upgrade-subscription')}}" class="btn btn-outline-secondary">
                                Naiktaraf ke Premium
                            </a>
                            {{-- @else
                            <a href="{{ route('test.changesub')}}" class="btn btn-outline-secondary">
                                Remove Subscription
                            </a> --}}
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </section>
@endsection