@extends('layouts.app')

@section('title', 'Add Warehouse')

@section('page-wrapper')
    <!-- Page Header with Breadcrumb -->
    <div class="page-header d-print-none">
        <div class="container-fluid">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Breadcrumb -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
                                        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
                                        <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
                                    </svg>
                                    Dashboard
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('warehouses.index') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="icon icon-tabler icons-tabler-outline icon-tabler-map-pin-check">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
                                        <path
                                            d="M11.87 21.48a1.992 1.992 0 0 1 -1.283 -.58l-4.244 -4.243a8 8 0 1 1 13.355 -3.474" />
                                        <path d="M15 19l2 2l4 -4" />
                                    </svg>
                                    Warehouse
                                </a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Add</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- Page Body -->
    <div class="page-body">
        <div class="container-fluid">
            <div class="row">
                <!-- Card -->
                <div class="col-md-6 col-12">
                    <div class="card">
                        <form id="couponForm" action="{{ route('warehouses.store') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <!-- Card Header -->
                            <div class="card-header">
                                <h3 class="card-title">Add Warehouse</h3>
                            </div>

                            <!-- Card Body -->
                            <div class="card-body">
                                <div class="row">
                                    <!-- Account -->
                                    <div class="mb-3 col-6">
                                        <label for="courier_setup_id" class="form-label required">Account</label>
                                        <select type="text" class="form-select" id="courier_setup_id"
                                            name="courier_setup_id" value="" required>
                                            @foreach ($couriersSetups as $id => $name)
                                                <option value="{{ $id }}"
                                                    {{ old('courier_setup_id') == $id ? 'selected' : '' }}>
                                                    {{ $name }}</option>
                                            @endforeach
                                        </select>
                                        @error('courier_setup_id')
                                            <div class="text-danger"><small>{{ $message }}</small></div>
                                        @enderror
                                    </div>
                                    <!-- Name -->
                                    <div class="mb-3 col-md-6 col-sm-12">
                                        <label for="name" class="form-label required">Name</label>
                                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                                            placeholder="Enter name" id="name" name="name"
                                            value="{{ old('name') }}" required>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <!-- Email -->
                                    <div class="mb-3 col-md-6 col-sm-12">
                                        <label for="email" class="form-label">Email</label>
                                        <div class="input-group ">
                                            <input type="text" class="form-control @error('email') is-invalid @enderror"
                                                placeholder="Enter email" id="email" name="email"
                                                value="{{ old('email') }}">
                                            @error('email')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <!-- Phone -->
                                    <div class="mb-3 col-md-6 col-sm-12">
                                        <label for="phone" class="form-label required">Phone</label>
                                        <div class="input-group ">
                                            <input type="text" class="form-control @error('phone') is-invalid @enderror"
                                                placeholder="Enter phone" id="phone" name="phone"
                                                value="{{ old('phone') }}">
                                            @error('phone')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <!-- Address -->
                                    <div class="mb-3 col-12">
                                        <label for="address" class="form-label required">Address</label>
                                        <textarea class="form-control @error('address') is-invalid @enderror" placeholder="Enter address" id="address"
                                            name="address" rows="3">{!! old('address') !!}</textarea>
                                        @error('address')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <!-- Pin -->
                                    <div class="mb-3 col-md-6 col-sm-12">
                                        <label for="pin" class="form-label required">Pin</label>
                                        <div class="input-group ">
                                            <input type="number" class="form-control @error('pin') is-invalid @enderror"
                                                id="pin" name="pin" value="{{ old('pin') }}"
                                                minlength="6" maxlength="6" pattern="[0-9]{6}" placeholder="Enter pin"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6)">
                                            @error('pin')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <!-- City -->
                                    <div class="mb-3 col-md-6 col-sm-12">
                                        <label for="city" class="form-label required">City</label>
                                        <div class="input-group ">
                                            <input type="hidden" name="city_id" id="city_id" value="{{ old('city_id') }}">
                                            <input type="text"
                                                class="form-control @error('city_id') is-invalid @enderror" id="city"
                                                name="city" placeholder="Enter city" value="{{ old('city') }}"
                                                readonly>
                                            @error('city_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <!-- State -->
                                    <div class="mb-3 col-md-6 col-sm-12">
                                        <label for="state" class="form-label required">State</label>
                                        <div class="input-group ">
                                            <input type="hidden" name="state_id" id="state_id" value="{{ old('state_id') }}">
                                            <input type="text"
                                                class="form-control @error('state_id') is-invalid @enderror"
                                                id="state" name="state" placeholder="Enter state"
                                                value="{{ old('state') }}" readonly>
                                            @error('state_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <!-- Country -->
                                    <div class="mb-3 col-md-6 col-sm-12">
                                        <label for="country" class="form-label required">Country</label>
                                        <div class="input-group ">
                                            <input type="hidden" name="country_id" id="country_id" value="101">
                                            <input type="text"
                                                class="form-control @error('country') is-invalid @enderror" id="country"
                                                placeholder="Enter country" name="country" value="{{ old('country') }}"
                                                readonly>
                                            @error('country')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <!-- Satus -->
                                    <div class="">
                                        <label for="status" class="form-label required">Status</label>
                                        <div>
                                            <label class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="status_active"
                                                    name="status" value="Active" checked>
                                                <span class="form-check-label" for="status_active">Active</span>
                                            </label>
                                            <label class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="status_inactive"
                                                    name="status" value="Inactive">
                                                <span class="form-check-label" for="status_inactive">Inactive</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Card Footer -->
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary me-3">Save</button>
                                <a href="{{ route('warehouses.index') }}" class="btn">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if (session('sucess'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showSuccessMessage("{{ session('sucess') }}");
            });
        </script>
    @endif
    @if (session('error'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showErrorMessage("{{ session('error') }}");
            });
        </script>
    @endif
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        $(document).ready(function() {
            // Grab old values from Blade
            $("#pin").on('input', function() {
                let pincode = $(this).val();

                if (pincode.length === 6) { // Ensure 6-digit pincode
                    $.ajax({
                        url: '{{ route('getstatecity', ':pincode') }}'.replace(':pincode',
                            pincode),
                        type: 'GET',
                        success: function(data) {
                            if (data.state_name) {
                                $("#state_id").val(data.id);
                                $("#state").val(data.state_name);
                            }
                            if (data.city_name) {
                                $("#city_id").val(data.id);
                                $("#city").val(data.city_name);
                            }
                            $("#country").val("India");
                        },
                        error: function() {
                            toastr.error('Invalid pincode or data not found.');
                            // alert('Invalid pincode or data not found.');
                        }
                    });
                } else {
                    $("#state_id").val("");
                    $("#state").val("");
                    $("#city_id").val("");
                    $("#city").val("");
                    $("#country").val("");
                }
            });
        });
        // @formatter:off
        document.addEventListener("DOMContentLoaded", function() {
            var el;
            window.TomSelect && (new TomSelect(el = document.getElementById('courier_setup_id'), {
                copyClassesToDropdown: false,
                dropdownParent: 'body',
                controlInput: '<input>',
                render: {
                    item: function(data, escape) {
                        if (data.customProperties) {
                            return '<div><span class="dropdown-item-indicator">' + data
                                .customProperties + '</span>' + escape(data.text) + '</div>';
                        }
                        return '<div>' + escape(data.text) + '</div>';
                    },
                    option: function(data, escape) {
                        if (data.customProperties) {
                            return '<div><span class="dropdown-item-indicator">' + data
                                .customProperties + '</span>' + escape(data.text) + '</div>';
                        }
                        return '<div>' + escape(data.text) + '</div>';
                    },
                },
            }));
        });
        // @formatter:on
    </script>
@endsection