@extends('admin.layouts.layouts')

@section('title', 'Create | Location')

@section('page-css')
    <style>
        .owner_details {
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
        }
    </style>
@endsection

@section('content')
    <div class="page-header">
        <h3 class="page-title">
            Create Location
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('location.index') }}">Location</a></li>
                <li class="breadcrumb-item active" aria-current="page">Create</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        {!! Form::open([
            'route' => 'location.store',
            'method' => 'POST',
            'id' => 'location_form',
        ]) !!}
        @csrf
        <div class="card-body">
            {{-- Basic Details --}}
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="name" class="form-label">Name <span
                                class="text-danger">*</span></label>
                        <input type="text" name="name" id="name" class="form-control onlytxt"
                            placeholder="Enter Name" value="{{ old('name') }}" data-parsley-required
                            data-parsley-trigger='keyup' data-parsley-required-message="Please enter name"
                            data-parsley-pattern='^[a-zA-Z_ ]*$' maxlength="100" data-parsley-maxlength="100"
                            data-parsley-maxlength-message="Name may not be greater than 100 characters"
                            data-parsley-pattern-message='Only alphabets are allowed' data-parsley-errors-container='#name_error'>
                        <span class="text-danger"
                            id="name_error">{{ $errors->first('name') }}</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="mobile" class="form-label">Mobile Number <span
                                class="text-danger">*</span></label>
                        <input type="text" name="mobile" id="mobile" class="form-control mobile"
                            placeholder="Enter Mobile Number" value="{{ old('mobile') }}" data-parsley-required
                            data-parsley-trigger="keyup" data-parsley-type="digits"
                            data-parsley-required-message='Please enter mobile number' maxlength="10"
                            oninput="this.value=this.value.slice(0,this.maxLength)"
                            data-parsley-type-message="Please enter valid mobile number" data-parsley-errors-container='#mobile_error'>
                        <span class="text-danger"
                            id="mobile_error">{{ $errors->first('mobile') }}</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="email" class="form-label">Email <span
                                class="text-danger">*</span></label>
                        <input type="text" name="email" id="email" class="form-control"
                            placeholder="Enter Email" value="{{ old('email') }}"
                            data-parsley-trigger="keyup" data-parsley-required="required"
                            data-parsley-type="email"
                            data-parsley-pattern="^[a-zA-Z0-9.]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,}$"
                            data-parsley-pattern-message="Please enter valid email"
                            data-parsley-required-message="Please enter email"
                            data-parsley-type-message="Please enter valid email"
                            data-parsley-validate-full-width-characters="true"
                            data-parsley-errors-container='#email_error'>
                        <span class="text-danger" id="email_error">{{ $errors->first('email') }}</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="expense_limit" class="form-label">Expense Limit <span class="text-danger">*</span></label>
                        <input type="text" name="expense_limit" id="expense_limit" class="form-control amount"
                            placeholder="Enter Expense Limit"
                            data-parsley-required data-parsley-trigger='keyup'
                            data-parsley-required-message="Please enter expense limit"
                            data-parsley-errors-container='#expense_limit_error'>
                        <div class="invalid-feedback" id="expense_limit_error"></div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="gst_no" class="form-label">GST Number <span class="text-danger">*</span></label>
                        <input type="text" name="gst_no" id="gst_no" class="form-control gstNumber"
                            placeholder="Enter GST Number" value="{{ old('gst_no') }}" data-parsley-required
                            data-parsley-trigger="keyup"
                            data-parsley-required-message='Please enter GST number' maxlength="15"
                            oninput="this.value=this.value.slice(0,this.maxLength)"
                            data-parsley-pattern="^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$"
                            data-parsley-pattern-message="Please enter valid GST number" data-parsley-errors-container='#gst_no_error'>
                        <span class="text-danger" id="gst_no_error">{{ $errors->first('gst_no') }}</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="location_code" class="form-label">Location Code <span class="text-danger">*</span></label>
                        <input type="text" name="location_code" id="location_code" class="form-control"
                            placeholder="Enter Location Code" value="{{ old('location_code') }}" data-parsley-required
                            data-parsley-trigger="keyup"
                            data-parsley-required-message='Please enter location code'
                            data-parsley-errors-container='#location_code_error'>
                        <span class="text-danger" id="location_code_error">{{ $errors->first('location_code') }}</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="latitude" class="form-label">Latitude <span class="text-danger">*</span></label>
                        <input type="text" name="latitude" id="latitude" class="form-control"
                            placeholder="Enter Latitude" value="{{ old('latitude') }}" data-parsley-required
                            data-parsley-trigger="keyup"
                            data-parsley-type="number"
                            data-parsley-type-message='Latitude must be a valid number'
                            data-parsley-required-message='Please enter latitude'
                            data-parsley-errors-container='#latitude_error'>
                        <span class="text-danger" id="latitude_error">{{ $errors->first('latitude') }}</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="longitude" class="form-label">Longitude <span class="text-danger">*</span></label>
                        <input type="text" name="longitude" id="longitude" class="form-control"
                            placeholder="Enter Longitude" value="{{ old('longitude') }}" data-parsley-required
                            data-parsley-trigger="keyup"
                            data-parsley-type="number"
                            data-parsley-type-message='Longitude must be a valid number'
                            data-parsley-required-message='Please enter longitude'
                            data-parsley-errors-container='#longitude'>
                        <span class="text-danger" id="longitude_error">{{ $errors->first('longitude') }}</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="radius" class="form-label">Radius <span class="text-danger">*</span></label>
                        <input type="text" name="radius" id="radius" class="form-control"
                            placeholder="Enter Radius" value="{{ old('radius') }}" data-parsley-required
                            data-parsley-trigger="keyup"
                            data-parsley-required-message='Please enter radius'
                            data-parsley-type="number" data-parsley-min="0.01"
                            data-parsley-type-message='Radius must be a valid number'
                            data-parsley-min-message='Radius must be greater than 0'
                            data-parsley-errors-container='#radius_error'>
                        <span class="text-danger" id="radius_error">{{ $errors->first('radius') }}</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label class="form-label">Country <span class="text-danger">*</span></label>
                        <select class="form-control selectCountry" name="country" id="country"
                            data-parsley-trigger="keyup" data-parsley-required
                            data-parsley-required-message="Please select country"
                            data-parsley-errors-container='#country_error'>
                            <option value="">Select Country</option>
                            @foreach ($countries as $countryData)
                                <option value="{{ $countryData->id }}"
                                    {{ old('country') == $countryData->id ? 'selected' : '' }}>
                                    {{ $countryData->country_name }}
                                </option>
                            @endforeach
                        </select>
                        <span class="text-danger error-msg" id="country_error">{{ $errors->first('country') }}</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label class="form-label">Region <span class="text-danger">*</span></label>
                        <select class="form-control selectRegion" name="region" id="region"
                            data-parsley-trigger="keyup" data-parsley-required
                            data-parsley-required-message="Please select region"
                            data-parsley-errors-container='#region_error'>
                            <option value="">Select Region</option>
                        </select>
                        <span class="text-danger error-msg"
                            id="region_error">{{ $errors->first('region') }}</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label class="form-label">State <span class="text-danger">*</span></label>
                        <select class="form-control selectState" name="state" id="state"
                            data-parsley-trigger="keyup" data-parsley-required
                            data-parsley-required-message="Please select state"
                            data-parsley-errors-container='#state_error'>
                            <option value="">Select State</option>
                        </select>
                        <span class="text-danger error-msg"
                            id="state_error">{{ $errors->first('state') }}</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label class="form-label">District <span class="text-danger">*</span></label>
                        <select class="form-control selectDistrict" name="district" id="district"
                            data-parsley-trigger="keyup" data-parsley-required
                            data-parsley-required-message="Please select district"
                            data-parsley-errors-container='#district_error'>
                            <option value="">Select District</option>
                        </select>
                        <span class="text-danger error-msg"
                            id="district_error">{{ $errors->first('district') }}</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label class="form-label">Sub District <span class="text-danger">*</span></label>
                        <select class="form-control selectSubDistrict" name="sub_district" id="sub_district"
                            data-parsley-trigger="keyup" data-parsley-required
                            data-parsley-required-message="Please select sub district"
                            data-parsley-errors-container='#sub_district_error'>
                            <option value="">Select Sub District</option>
                        </select>
                        <span class="text-danger error-msg"
                            id="sub_district_error">{{ $errors->first('sub_district') }}</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label class="form-label">City <span class="text-danger">*</span></label>
                        <select class="form-control selectCity" name="city" id="city"
                            data-parsley-trigger="keyup" data-parsley-required
                            data-parsley-required-message="Please select city"
                            data-parsley-errors-container='#city_error'>
                            <option value="">Select City</option>
                        </select>
                        <span class="text-danger error-msg"
                            id="city_error">{{ $errors->first('city') }}</span>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="address" class="form-label">Address <span class="text-danger">*</span></label>
                        <textarea name="address" id="address" rows="3" placeholder="Enter Address" class="form-control"
                            data-parsley-required data-parsley-trigger='keyup' data-parsley-required-message="Please enter address" data-parsley-errors-container='#address_error'>{{ old('address') }}</textarea>
                        <span class="text-danger" id="address_error">{{ $errors->first('address') }}</span>
                    </div>
                </div>

            </div>
        </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-primary btn-fw" id="addLocation">Save</button>
            <a href="{{ route('location.index') }}" class="btn btn-light btn-fw">Cancel</a>
        </div>

        {{ Form::close() }}
    </div>
@endsection
@section('page-js')
    <script>
        var locationID = "";
        var indexRoute = "{{ route('location.index') }}";
        var storeRoute = "{{ route('location.store') }}";
        var getRegion = "{{ route('country.region.regions-of-country') }}";
        var getState = "{{ route('states-of-regions') }}";
        var getStateWiseDistrict = "{{ route('state.district.districts-of-state') }}";
        var getDistrictWiseSubDistrict = "{{ route('district.sub-district.sub-districts-of-district') }}";
        var getSubDistrictWiseCity = "{{ route('sub-district.city.cities-of-sub-district') }}";
    </script>
    <script src="{{ asset('assets/js/admin/location.js') }}"></script>
@endsection