@extends('master.app')
@section('title', 'Create Customer')

@section('pageCSS')
<style>
    .page-card{
        border:0;
        border-radius:16px;
        box-shadow:0 8px 24px rgba(2,6,23,.06);
        background:#fff;
    }
    .soft-wrap{
        background: rgba(13,110,253,.06);
        border-radius:16px;
        padding:14px;
    }
    .req:after{ content:" *"; color:#dc3545; font-weight:700; }
</style>
@endsection

@section('body')
<main class="app-content">
    <section>
        <div class="card page-card">

            {{-- Header --}}
            <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
                <div>
                    <h4 class="mb-0">Create Customer</h4>
                    <small class="text-muted">Add a new customer record</small>
                </div>
                <a href="{{ route('customers.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="fa fa-arrow-left"></i> Back
                </a>
            </div>

            <div class="card-body">

                {{-- Validation Errors --}}
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <div class="fw-bold mb-1">Please fix the following:</div>
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="soft-wrap">
                    <form action="{{ route('customers.store') }}" method="POST" id="customerForm">
                        @csrf

                        <div class="row g-3">

                            {{-- Name --}}
                            <div class="col-md-6">
                                <div class="form-outline">
                                    <input type="text" required id="name" name="name"
                                        value="{{ old('name') }}"
                                        class="form-control @error('name') is-invalid @enderror" />
                                    <label class="form-label req" for="name">Name</label>
                                </div>
                                @error('name')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Province --}}
                            <div class="col-md-6">
                                <label class="form-label req">Province</label>
                                <select id="province_id" name="province_id"
                                    required
                                    class="select2 form-control @error('province_id') is-invalid @enderror"
                                    style="width: 100%;">
                                    <option value="">Choose Province</option>
                                    @foreach ($provinces as $row)
                                        <option value="{{ $row->id }}" @selected(old('province_id')==$row->id)>
                                            {{ $row->title_en ?? $row->name ?? ('Province #'.$row->id) }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('province_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Phone --}}
                            <div class="col-md-6">
                                <div class="form-outline">
                                    <input type="text" id="phone" name="phone" required
                                        value="{{ old('phone') }}"
                                        class="form-control @error('phone') is-invalid @enderror" />
                                    <label class="form-label req" for="phone">Phone</label>
                                </div>
                                @error('phone')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Address --}}
                            <div class="col-md-6">
                                <div class="form-outline">
                                    <input type="text" id="address" name="address" required
                                        value="{{ old('address') }}"
                                        class="form-control @error('address') is-invalid @enderror" />
                                    <label class="form-label req" for="address">Address</label>
                                </div>
                                @error('address')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Type (optional UI) --}}
                            <div class="col-md-12">
                                <div class="p-3 bg-white rounded-4 border">
                                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                        <div>
                                            <div class="fw-bold">Account Type</div>
                                            <small class="text-muted">If you want a login account, choose type S</small>
                                        </div>

                                        <div class="btn-group" role="group" aria-label="Type">
                                            <input type="radio" class="btn-check" name="type_id" id="type_customer"
                                                   value="1" {{ old('type_id',1)==1 ? 'checked' : '' }}>
                                            <label class="btn btn-sm btn-outline-primary" for="type_customer">Customer (C)</label>

                                            <input type="radio" class="btn-check" name="type_id" id="type_staff"
                                                   value="2" {{ old('type_id')==2 ? 'checked' : '' }}>
                                            <label class="btn btn-sm btn-outline-dark" for="type_staff">Has Login (S)</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Email --}}
                            <div class="col-md-6" id="in_email" style="display:none;">
                                <div class="form-outline">
                                    <input type="email" id="email" name="email"
                                        value="{{ old('email') }}"
                                        class="form-control @error('email') is-invalid @enderror" />
                                    <label class="form-label" for="email">Email</label>
                                </div>
                                @error('email')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Password --}}
                            <div class="col-md-6" id="in_password" style="display:none;">
                                <div class="form-outline">
                                    <input type="text" id="password" name="password"
                                        value="{{ old('password') }}"
                                        class="form-control @error('password') is-invalid @enderror" />
                                    <label class="form-label" for="password">Password</label>
                                </div>
                                @error('password')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Actions --}}
                            <div class="col-12 d-flex gap-2 flex-wrap mt-2">
                                <button type="submit" class="btn btn-primary btn-rounded px-4">
                                    <i class="fa fa-save"></i> Save
                                </button>
                                <a href="{{ route('customers.index') }}" class="btn btn-outline-secondary btn-rounded px-4">
                                    Cancel
                                </a>
                            </div>

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

            </div>
        </div>
    </section>
</main>
@endsection

@section('pageJs')
<script type="text/javascript">
    $(".app-menu").removeClass("active");
    $("#nav_salei").addClass("active");
    $("#salei").addClass("is-expanded");
    $("#customer_add").addClass("active");

    function toggleLoginFields(){
        const type = $('input[name="type_id"]:checked').val();
        if(type == 2){
            $("#in_email").show();
            $("#in_password").show();
        }else{
            $("#in_email").hide();
            $("#in_password").hide();
        }
    }

    // init
    toggleLoginFields();

    // change
    $('input[name="type_id"]').on('change', function(){
        toggleLoginFields();
    });

    // prevent double submit
    $('#customerForm').submit(function() {
        $(this).find(':submit').attr('disabled', 'disabled');
        setTimeout(() => $(this).find(':submit').attr('disabled', false), 1200);
    });
</script>
@endsection