@extends('layouts.app')

@section('title', 'Add Support Ticket')

@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('support-tickets.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-headset">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M4 14v-3a8 8 0 1 1 16 0v3" />
                                        <path d="M18 19c0 1.657 -2.686 3 -6 3" />
                                        <path
                                            d="M4 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3z" />
                                        <path
                                            d="M15 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3z" />
                                    </svg>
                                    Support Ticket
                                </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">
                        <!-- Card Header -->
                        <div class="card-header">
                            <h3 class="card-title">Add Support Ticket</h3>
                            {{-- @error('error')
                            HERE
                            <div class="invalid-feedback">{{ $error }}</div>
                            @enderror --}}
                        </div>
                        <form id="adminForm" action="{{ route('support-tickets.store') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="card-body">
                                <div class="row">
                                    <!-- Type -->
                                    <div class="mb-3 col-12">
                                        <label for="select-type" class="form-label required">Type</label>
                                        <select type="text" class="form-select @error('type') is-invalid @enderror"
                                            id="select-type" name="type" value="">
                                            @foreach ($type as $key => $value)
                                                <option value="{{ $key }}"
                                                    {{ old('type') == $key ? 'selected' : '' }}>{{ $value }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('type')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <!-- AWB -->
                                    <div class="mb-3 col-12" id="awb-wrapper">
                                        <label for="awb" class="form-label required">AWB</label>
                                        <input type="text" class="form-control @error('awb') is-invalid @enderror"
                                            id="awb" name="awb" value="{{ old('awb') }}"
                                            placeholder="Enter awb">
                                        @error('awb')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

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

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

                                @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 4)
                                    <div class="row">
                                        <!-- Satus -->
                                        <div class="mt-3 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" 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>
                                @endif
                            </div>

                            <!-- Card Footer -->
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary me-3">Save</button>
                                <a href="{{ route('support-tickets.index') }}" class="btn">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('scripts')
    <script>
        // @formatter:off
        document.addEventListener("DOMContentLoaded", function() {
            var el;
            window.TomSelect && (new TomSelect(el = document.getElementById('select-type'), {
                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

        $(document).ready(function() {
            $('#awb-wrapper').hide();

            function toggleAwbField() {
                var selectedType = $('#select-type').val();
                if (selectedType === 'Booking') {
                    $('#awb-wrapper').show();
                } else {
                    $('#awb-wrapper').hide();
                    $('#awb').val('');
                }
            }

            // Initial check on page load
            $('#awb-wrapper').hide();

            // On change of the select box
            $('#select-type').change(function() {
                toggleAwbField();
            });

            toggleAwbField();
        });
    </script>
@endsection