@extends('admin.layouts.app')
@push('title')
    <title>{{ isset($edit) ? 'Update User' : 'Create User' }}</title>
@endpush

@push('banner')
    <h1 class="m-0">User</h1>
@endpush
@section('content')

<div class="overlay"></div>
<div class="loader"></div>
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <div>
                            <h1 class="mb-4">{{ isset($edit) ? 'Update Hospital' : 'Create Hospital' }}</h1>
                        </div>
                        <div>
                            <a href="{{ route('hospital.index') }}" class="btn btn-primary"><i class="bi bi-arrow-left"></i>
                                Back</a>
                        </div>
                    </div>
                    <form method="POST"
                        action="{{ isset($edit) ? route('hospital.update', $edit->id) : route('hospital.store') }}">
                        @csrf
                        @if (isset($edit))
                            @method('PUT')
                        @endif
                        @csrf

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name">Hospital Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="name"
                                        class="form-control @error('name') is-invalid @enderror"
                                        value="{{ isset($edit->name) ? $edit->name : '' }}"
                                        placeholder="Enter Hospital Name">
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="province_id">Select Province<span class="text-danger">*</span></label>
                                    <select name="province_id" id="province_id" class="form-control @error('province_id') is-invalid @enderror">
                                        <option value="">Select Province</option>
                                        @foreach ($provinces as $province)
                                            <option value="{{ $province->id }}" {{ isset($edit) && $province->id == $edit->province_id ? 'selected' : '' }}>
                                                {{ $province->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('province_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="district">District<span class="text-danger">*</span></label>
                                    <input type="text" name="district" id="district"
                                        class="form-control @error('district') is-invalid @enderror"
                                        value="{{ isset($edit->district) ? $edit->district : '' }}"
                                        placeholder="example Peshawar">
                                    @error('district')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="type">Type<span class="text-danger">*</span></label>
                                    <select name="type" id="type" class="form-control @error('type') is-invalid @enderror">
                                        <option value="" disabled>Select Type</option>
                                        <option value="Private Hospital" {{ isset($edit->type) && $edit->type == 'Private Hospital' ? 'selected' : '' }}>Private Hospital</option>
                                        <option value="Public Hospital" {{ isset($edit->type) && $edit->type == 'Public Hospital' ? 'selected' : '' }}>Public Hospital</option>
                                        <option value="Public Private" {{ isset($edit->type) && $edit->type == 'Public Private' ? 'selected' : '' }}>Public Private</option>
                                        <option value="Trust Hospital" {{ isset($edit->type) && $edit->type == 'Trust Hospital' ? 'selected' : '' }}>Trust Hospital</option>
                                    </select>
                                    @error('type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="district">District<span class="text-danger">*</span></label>
                                    <input type="text" name="address" id="address"
                                        class="form-control @error('address') is-invalid @enderror"
                                        value="{{ isset($edit->address) ? $edit->address : '' }}"
                                        placeholder="Enter Addeess">
                                    @error('address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="country_id">Select Country<span class="text-danger">*</span></label>
                                    <select name="country_id" id="country_id" class="form-control @error('country_id') is-invalid @enderror">
                                        @foreach ($countries as $country)
                                        <option value="{{ $country->id }}"
                                            {{ old('country_id', isset($edit->country_id) ? $edit->country_id : $defaultCountryId) == $country->id ? 'selected' : '' }}>
                                            {{ $country->name }}
                                        </option>
                                    @endforeach
                                    
                                    </select>
                                    @error('country_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>                       
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="city_id">Select City<span class="text-danger">*</span></label>
                                    <select name="city_id" id="city_id" class="form-control @error('city_id') is-invalid @enderror">
                                        <option value="">Select City</option>
                                        @foreach ($cities as $city)
                                        <option value="{{ $city->id }}"
                                            {{ isset($edit) && $city->id == $edit->city_id ? 'selected' : '' }}>
                                            {{ $city->name }}
                                        </option>
                                    @endforeach
                                    </select>
                                    @error('city_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <button type="submit"
                            class="btn btn-primary btn-block">{{ isset($edit) ? 'Update' : 'Create' }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('customJs')
    <script>
        $(document).ready(function() {
            $('#country_id').change(function() {
                $('.overlay').show();
                $('.loader').show();
                var country_id = $(this).val();
        
                if (country_id) {
                    $.ajax({
                        url: '{{ route("user.getCities") }}',
                        type: 'GET',
                        data: { country_id: country_id },
                        dataType: 'json',
                        success: function(data) {
                            setTimeout(function() {
                                // Replace input with select
                                var selectHtml = '<select name="city_id" id="city_id" class="form-control @error('city_id') is-invalid @enderror">';
                                selectHtml += '<option value="">Select City</option>';
        
                                $.each(data, function(key, value) {
                                    selectHtml += '<option value="' + value.id + '">' + value.name + '</option>';
                                });
        
                                selectHtml += '</select>';
                                $('#city_id').replaceWith(selectHtml);
                                
                                $('.overlay').hide();
                                $('.loader').hide();
                            }, 2000);
                        },
                        error: function(xhr) {
                            console.error(xhr.responseText);
                            $('.overlay').hide();
                            $('.loader').hide();
                        }
                    });
                } else {
                    var inputHtml = '<input type="text" name="city_id" id="city_id" list="cityList" disabled ';
                    inputHtml += 'class="form-control @error('city_id') is-invalid @enderror" ';
                    inputHtml += 'placeholder="Select City" value="{{ old('city_id', isset($edit->city->name) ? $edit->city->name : '') }}">';
                    $('#city_id').replaceWith(inputHtml);
                }
            });
        });
        
        
    </script>
@endsection