@extends('layouts.app')

@section('title') New Vendor @endsection

@section('css')
<!-- Select2 -->
<link href="{{ asset('build/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1') Vendors @endslot
@slot('title') New Vendor @endslot
@endcomponent

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Vendor Details</h4>
                @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="mdi mdi-check-all me-2"></i>
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                @endif

                @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="mdi mdi-block-helper me-2"></i>
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                @endif
                <form action="{{ route('vendor.store') }}" method="POST">
                    @csrf
                    <div class="row">

                        {{-- Name (Must follow IC) --}}
                        <div class="col-md-12 mb-3">
                            <label class="form-label">Name (Must follow IC) <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required>
                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- Email --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Email <span class="text-danger">*</span></label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required>
                            @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- NRIC --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">NRIC <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('nric') is-invalid @enderror" name="nric" value="{{ old('nric') }}" required>
                            @error('nric') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- Mobile --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Mobile <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text">+60</span>
                                <input type="text" class="form-control @error('mobile') is-invalid @enderror" name="mobile" value="{{ old('mobile') }}" required placeholder="123456789">
                            </div>
                            @error('mobile') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- Home Phone --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Home Phone</label>
                            <div class="input-group">
                                <span class="input-group-text">+60</span>
                                <input type="text" class="form-control @error('home_phone') is-invalid @enderror" name="home_phone" value="{{ old('home_phone') }}" placeholder="123456789">
                            </div>
                            @error('home_phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- Address Line 1 --}}
                        <div class="mb-3">
                            <label class="form-label">Address Line 1</label>
                            <input type="text" class="form-control @error('address_line_1') is-invalid @enderror" name="address_line_1" value="{{ old('address_line_1') }}">
                            @error('address_line_1') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- Address Line 2 --}}
                        <div class="mb-3">
                            <label class="form-label">Address Line 2</label>
                            <input type="text" class="form-control @error('address_line_2') is-invalid @enderror" name="address_line_2" value="{{ old('address_line_2') }}">
                            @error('address_line_2') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- Postcode --}}
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Postcode</label>
                            <input type="text" class="form-control @error('postcode') is-invalid @enderror" id="postcode" name="postcode" value="{{ old('postcode') }}">
                            @error('postcode') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- City --}}
                        <div class="col-md-4 mb-3">
                            <label class="form-label">City</label>
                            <input type="text" class="form-control @error('city') is-invalid @enderror" id="city" name="city" value="{{ old('city') }}">
                            @error('city') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- State --}}
                        <div class="col-md-4 mb-3">
                            <label class="form-label">State</label>
                            <select class="form-select select2 @error('state') is-invalid @enderror" id="state" name="state">
                                <option value="">Choose...</option>
                                @foreach($states as $state)
                                <option value="{{ $state->code }}" {{ old('state') == $state->code ? 'selected' : '' }}>{{ $state->name }}</option>
                                @endforeach
                            </select>
                            @error('state') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary w-md">Save Vendor</button>
                    <a href="{{ route('vendor.index') }}" class="btn btn-secondary">Cancel</a>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<!-- Select2 -->
<script src="{{ asset('build/libs/select2/js/select2.min.js') }}"></script>

<script>
    $(document).ready(function() {
        $('.select2').select2();

        // Fetch city and state based on postcode
        $("#postcode").on("blur", function() {
            let postcode = $(this).val();
            if (postcode.length > 0) {
                $.ajax({
                    url: "/lookup/postcode/" + postcode
                    , method: "GET"
                    , success: function(response) {
                        if (response) {
                            $("#city").val(response.city);
                            $("#state").val(response.state_code).trigger('change');
                        }
                    }
                    , error: function(xhr) {
                        if (xhr.status === 404) {
                            alert("Postcode not found.");
                            $("#city").val('');
                            $("#state").val('').trigger('change');
                        } else {
                            alert("Error looking up postcode.");
                        }
                    }
                });
            }
        });
    });

</script>
@endsection