@php
    function normalizeColorCode($color)
    {
        // Remove any leading '#'
        $color = ltrim($color, '#');

        // If color is like '##000000', remove one '#'
        if (strpos($color, '##') === 0) {
            return '#' . substr($color, 2);
        }
        // If color is like '000000', add '#'
        elseif ($color && $color[0] !== '#') {
            return '#' . $color;
        }

        // If color is already in the correct format or empty
        return $color ? '#' . $color : '#000000';
    }
@endphp
@extends('back_office.layouts.teamleader_app.app')

@section('content')
    <style>
        input[type="color"] {
            -webkit-appearance: none;
            border: none;
            width: 50px;
            height: 32px;
        }

        input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        input[type="color"]::-webkit-color-swatch {
            border: none;
        }

        .carousel-item img {
            width: 300px;
            /* Adjust width as needed */
            height: 200px;
            /* Adjust height as needed */
            object-fit: contain;
            /* Ensure images maintain aspect ratio and cover the entire area */
        }
    </style>
    <div>
        <div class="container-fluid">
            <div class="p-4 bg-white row">
                <h5>Task Details</h5>

                <hr>

                <h5>CUSTOMER INFORMATION</h5>

                <div class="customer_information_section row">
                    <p><span class="text-secondary">FULL NAME :</span>
                        {{ isset($washTask->user) ? $washTask->user->name : '-' }}</p>
                    <p><span class="text-secondary">CONTACT :</span>
                        {{ isset($washTask->user) ? $washTask->user->phone : '-' }}</p>
                </div>
                <hr>

                <h5>CAR INFORMATION</h5>

                <div class="car_information_section row mb-2">
                    <p><span class="text-secondary">CAR BRAND/MODEL :</span>
                        {{ isset($washTask->car) ? $washTask->car->model->name : '-' }}</p>
                    <p><span class="text-secondary">PLATE NUMBER :</span>
                        {{ isset($washTask->car) ? $washTask->car->plate_number : '-' }}</p>
                    <p><span class="text-secondary">COLOR :</span> <input type="color"
                            value="{{ isset($washTask->car) ? normalizeColorCode($washTask->car->color) : '-' }}" disabled>
                    </p>
                    <div class="car_image">
                        <img src="{{ isset($washTask->car) ? $washTask->car->image : '-' }}" alt=""
                            style="max-width: 100%; height: auto;">
                    </div>
                </div>
                <hr>

                <div class="worker_section">
                    <p><span class="text-secondary">WORKER :</span>
                        {{ isset($washTask->team) ? $washTask->team->name : '-' }}</p>
                    <p><span class="text-secondary">WASH DATE :</span>
                        {{ date('d-m-Y', strtotime($washTask->date)) ?? '-' }}
                    </p>
                    <p><span class="text-secondary">WASH TIME :</span>
                        {{ isset($washTask->slotId) ? $washTask->slotId->starting_from : '-' }}</p>
                </div>
                <hr>
                <div class="worker_section">
                    <p><span class="text-secondary">AREA :</span> {{ $washTask->area ?? '-' }}</p>
                    <p><span class="text-secondary">STREET NAME :</span>
                        {{ isset($washTask->car->customer_address) ? $washTask->car->customer_address->street_name : '-' }}
                    </p>
                    <p><span class="text-secondary">BUILDING NO :</span>
                        {{ isset($washTask->car->customer_address) ? $washTask->car->customer_address->building_no : '-' }}
                    </p>
                    <p><span class="text-secondary">LOOT NO :</span>
                        {{ isset($washTask->car->customer_address) ? $washTask->car->customer_address->loot_number : '-' }}
                    </p>
                    <p><span class="text-secondary">CAR PARKING LOCATION</p>
                </div>

                <div class="mb-2" style="position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0;">
                    @php
                        $long = $lat = '';
                    @endphp
                    @if (isset($washTask->car->customer_address))
                        @php
                            $long = $washTask->car->customer_address->longitude;
                            $lat = $washTask->car->customer_address->latitude;
                        @endphp
                    @endif
                    <iframe
                        src="https://maps.google.com/maps?q={{ $lat }},{{ $long }}&hl=es;z=20&amp;output=embed"
                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0"
                        allowfullscreen="" aria-hidden="false" tabindex="0">
                    </iframe>
                </div>
                <a href="https://www.google.com/maps/search/?api=1&query={{ $lat }},{{ $long }}"
                    class="btn btn-secondary">Go to location</a>



                <hr>
                <h5>Wash Information</h5>

                <form class="form-horizontal" action="{{ route('teamleader-app.wash.update', ['id' => $washTask->id]) }}"
                    method="POST" enctype="multipart/form-data">
                    <input type="hidden" value="{{ $washTask->status }}" name="status">
                    @csrf
                    @if (in_array($washTask->status,['sheduled','new']))
                        <button type="button" class="btn bg-gradient-success start w-100" status="started"
                            task-id="{{ $washTask->id }}">Start Wash</button>
                    @elseif($washTask->status == 'started')
                        <button type="button" status="ended" class="btn bg-gradient-danger start w-100"
                            task-id="{{ $washTask->id }}">End Wash</button>
                    @endif
                    {{-- <p>Wash Status</p> --}}

                    {{-- <select class="form-control mb-4" name="status" id="status">
                        <option value="sheduled" {{ ($washTask->status == "sheduled") ? 'selected' : ''  }}>Sheduled</option>
                        <option value="started" {{ ($washTask->status == "started") ? 'selected' : ''  }}>Started</option>
                        <option value="ended" {{ ($washTask->status == "ended") ? 'selected' : ''  }}>Ended</option>
                        <option value="canceled" {{ ($washTask->status == "canceled") ? 'selected' : ''  }}>Canceled</option>
                        <option value="deleted" {{ ($washTask->status == "deleted") ? 'selected' : ''  }}>Deleted</option>
                    </select> --}}

                    @php
                        $washTaskDetails = isset($washTask->washTaskDetails)
                            ? $washTask->washTaskDetails->toArray()
                            : 0;
                    @endphp
                    @if (!empty($washTaskDetails) && count($washTaskDetails) > 0)
                        <div id="carouselExampleControls" class="carousel slide mb-4" data-ride="carousel">
                            <div class="carousel-inner">
                                @foreach ($washTaskDetails as $k => $img)
                                    <div class="carousel-item {{ $k == 0 ? 'active' : '' }}">
                                        <img src="{{ $img['team_images'] }}" class="d-block w-100" alt="Image">
                                    </div>
                                @endforeach
                            </div>
                            <a class="carousel-control-prev" href="#carouselExampleControls" role="button"
                                data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#carouselExampleControls" role="button"
                                data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    @endif

                    <p>Add Photos</p>

                    <input type="file" class="form-control mb-4" name="task_img[]" id="task_img" accept="image/*">
                    <button type="button" id="addPhotoBtn" class="btn bg-gradient-success float-end w-100">Add
                        Photo</button>

                    </p>
                    <p>Add Comment</p>

                    <textarea class="form-control mb-4" name="comment" id="comment" cols="20" rows="5">{{ $washTask->team_notes ?? '' }}</textarea>
                    <p>Customer Comment : {{ isset($washTask->customer_note) ? $washTask->customer_note : '-' }}</p>

                    <p>Slot : {{ (optional($washTask->slotId)->slot) ? optional($washTask->slotId)->slot : '-' }}</p>

                    <p>Date : {{ date('F j, Y', strtotime($washTask->date)) }}</p>
                    <button class="btn btn-success btn-block" type="submit">Save</button>
                </form>
            </div>
        </div>
    </div>
    @push('scripts')
        <link rel="stylesheet" href="{{ asset('css/tables.css') }}">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.bootstrap4.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
        <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.bootstrap4.min.js"></script>
        <script src="{{ env('APP_URL') }}/vendor/datatables/buttons.server-side.js"></script>
        <script src="{{ $cdn ?? asset('vendor/sweetalert/sweetalert.all.js') }}"></script>
        <script>
            var getwashtasklist = "{{ route('teamleader-app.getwashtasklist') }}";
        </script>
        <script>
            $(document).ready(function() {

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $('.start').on('click', function(e) {
                    e.preventDefault();
                    var status = $(this).attr('status');
                    var id = $(this).attr('task-id');
                    $.ajax({
                        url: '{{ route('teamleader-app.wash.updatetask') }}',
                        type: 'POST',
                        data: {
                            status: status,
                            id: id
                        },

                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    title: "Status Updated!",
                                    text: response.message,
                                    icon: "success"
                                });
                                setTimeout(() => {
                                    window.location.reload();
                                }, 2000);
                            }
                        },
                        error: function(error) {
                            Swal.fire({
                                title: "Wash Tasks",
                                text: "Something went wrong!!",
                                icon: "error"
                            });
                        }
                    });
                });

                $('#addPhotoBtn').click(function(e) {
                    e.preventDefault();
                    var taskImgInput = $('#task_img');

                    taskImgInput.attr('capture', 'environment');

                    taskImgInput.click();
                });
            });
        </script>
    @endpush

@endsection