@extends('layouts.app')

@section('title', 'Edit Courier')

@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('couriers_setups.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-package-import">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M12 21l-8 -4.5v-9l8 -4.5l8 4.5v4.5" />
                                        <path d="M12 12l8 -4.5" />
                                        <path d="M12 12v9" />
                                        <path d="M12 12l-8 -4.5" />
                                        <path d="M22 18h-7" />
                                        <path d="M18 15l-3 3l3 3" />
                                    </svg>
                                    Courier Setup
                                </a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Edit</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">
                        <!-- Card Header -->
                        <div class="card-header">
                            <h3 class="card-title">Edit Courier Setup</h3>
                        </div>
                        <form id="vendorForm" action="{{ route('couriers-setups.update', $couriersSetup->id) }}"
                            method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="account_type_checkbox"
                                value="{{ old('account_type_checkbox', $couriersSetup->account_type_checkbox ?? 0) }}">
                            <div class="card-body">
                                <div class="row">
                                    <div class="mb-3 col-6">
                                        <label for="courier_id" class="form-label required">Courier</label>
                                        <select class="form-select @error('courier_id') is-invalid @enderror"
                                            id="courier_id" name="courier_id" required>
                                            <option value="select">Select</option>
                                            @foreach ($couriers as $id => $name)
                                                <option value="{{ $id }}"
                                                    {{ old('courier_id', $couriersSetup->courier_id) == $id ? 'selected' : '' }}>
                                                    {{ $name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('courier_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-6">
                                        <label for="name" class="form-label required">Account Name</label>
                                        <input type="text" placeholder="Enter account name"
                                            class="form-control @error('name') is-invalid @enderror" id="name"
                                            name="name" value="{{ old('business_name', $couriersSetup->business_name) }}"
                                            required>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="mb-3 col-md-12">
                                        <label for="account_type" class="form-label required">Account Type</label>
                                        <div>
                                            <label class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="b2b"
                                                    name="account_type" value="B2B"
                                                    {{ old('account_type', $couriersSetup->account_type) === 'B2B' ? 'checked' : '' }}>
                                                <span class="form-check-label" for="b2b">B2B</span>
                                            </label>
                                            <label class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="b2c"
                                                    name="account_type" value="B2C"
                                                    {{ old('account_type', $couriersSetup->account_type) === 'B2C' ? 'checked' : '' }}>
                                                <span class="form-check-label" for="b2c">B2C</span>
                                            </label>
                                            <label class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" id="other"
                                                    name="account_type" value="Other"
                                                    {{ old('account_type', $couriersSetup->account_type) === 'Other' ? 'checked' : '' }}>
                                                <span class="form-check-label" for="other">Other</span>
                                            </label>
                                        </div>
                                        @error('account_type')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="mb-3 col-6" id="username_section">
                                        <label for="username" class="form-label required">Username</label>
                                        <input type="text" placeholder="Enter username"
                                            class="form-control @error('username') is-invalid @enderror" id="username"
                                            name="username" value="{{ old('username', $couriersSetup->username) }}">
                                        @error('username')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="mb-3 col-6" id="password_section">
                                        <label for="password" class="form-label required">Password</label>
                                        <input type="text" placeholder="Enter password"
                                            class="form-control @error('password') is-invalid @enderror" id="password"
                                            name="password" value="{{ old('password', $couriersSetup->password) }}">
                                        @error('password')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="mb-3 col-md-6" id="login_token_section">
                                        <label for="login_token" class="form-label required">Login Token</label>
                                        <input type="text" placeholder="Enter login token"
                                            class="form-control @error('login_token') is-invalid @enderror"
                                            id="login_token" name="login_token"
                                            value="{{ old('login_token', $couriersSetup->login_token) }}">
                                        @error('login_token')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-md-6" id="api_key_section">
                                        <label for="api_key" class="form-label required">API Key</label>
                                        <input type="text" placeholder="Enter API key"
                                            class="form-control @error('api_key') is-invalid @enderror" id="api_key"
                                            name="api_key" value="{{ old('api_key', $couriersSetup->api_key) }}">
                                        @error('api_key')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <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"
                                                    {{ old('status', $couriersSetup->status) === '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"
                                                    {{ old('status', $couriersSetup->status) === 'Inactive' ? 'checked' : '' }}>
                                                <span class="form-check-label" for="status_inactive">Inactive</span>
                                            </label>
                                        </div>
                                        @error('status')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary me-3">Update</button>
                                <a href="{{ route('couriers_setups.index') }}" class="btn">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize TomSelect for courier
            let adminSelect = new TomSelect("#courier_id", {
                copyClassesToDropdown: false,
                dropdownParent: 'body',
                controlInput: '<input>',
                render: {
                    item: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                                '<span class="dropdown-item-indicator">' + data.customProperties +
                                '</span>' : '') +
                            escape(data.text) + '</div>';
                    },
                    option: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                                '<span class="dropdown-item-indicator">' + data.customProperties +
                                '</span>' : '') +
                            escape(data.text) + '</div>';
                    },
                },
            });

            function otherAccount() {
                $('#username_section').removeClass('d-none');
                $('#password_section').removeClass('d-none');
                $('#api_key_section').removeClass('d-none');
                $('#login_token_section').removeClass('d-none');
            }

            function b2bAccount() {
                $('#username_section').removeClass('d-none');
                $('#password_section').removeClass('d-none');
                $('#login_token_section').addClass('d-none');
                $('#api_key_section').addClass('d-none');
            }

            function b2cAccount() {
                $('#username_section').addClass('d-none');
                $('#password_section').addClass('d-none');
                $('#login_token_section').addClass('d-none');
                $('#api_key_section').removeClass('d-none');
            }

            // Initialize based on old input or record's account_type
            @if (old('account_type', $couriersSetup->account_type) === 'B2B')
                b2bAccount();
            @elseif (old('account_type', $couriersSetup->account_type) === 'B2C')
                b2cAccount();
            @else
                otherAccount();
            @endif

            $('#other').change(function() {
                otherAccount();
            });
            $('#b2b').change(function() {
                b2bAccount();
            });
            $('#b2c').change(function() {
                b2cAccount();
            });
        });
    </script>
@endsection