@extends('admin.main')
@section('content')

        <div class="w-lg-80 py-4">
            <div class="container">
                <div class='d-flex justify-content-between'>
                    <div>
                        <h3 class='font-16 colorblack'>Devices</h3>
                    </div>


                </div>
                <div class="row justify-content-between tab-nav-pills">



                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                            aria-labelledby="pills-home-tab" tabindex="0">
                            <!-- Content for the 'All' tab -->
                        </div>
                        <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                            aria-labelledby="pills-profile-tab" tabindex="0">
                            <!-- Content for the 'Pending' tab -->
                        </div>
                        <div class="tab-pane fade" id="pills-contact" role="tabpanel"
                            aria-labelledby="pills-contact-tab" tabindex="0">
                            <!-- Content for the 'Notified' tab -->
                        </div>
                        <div class="tab-pane fade" id="pills-disabled" role="tabpanel"
                            aria-labelledby="pills-disabled-tab" tabindex="0">
                            <!-- Content for the 'Complete' tab -->
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-3">
                        <div class="d-flex align-items-center">
                            <div class="form-check ">
                                <input class="form-check-input fs-5" type="checkbox" value="" id="flexCheckDefault">
                                <label class="form-check-label" for="flexCheckDefault">
                                </label>
                            </div>
                            <div class="input-group inputgroup rounded-5 p-1">
                                <span class="input-group-text border-0" style="background-color: transparent;" id="basic-addon1">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                </span>
                                <input type="text" class="form-control border-0" placeholder="Search..." aria-label="Username" aria-describedby="basic-addon1">
                            </div>
                        </div>
                    </div>
                    <div class="col-7">
                        <div class="row">
                            <div class="col-3 ps-0">
                                <div class="selectfield d-flex align-items-center">
                                    <span> <i class="fa-solid fa-circle-plus ms-2"></i></span>
                                    <select class="form-select border-0 rounded-5 font-12 inter colorgray" aria-label="Default select example">
                                        <option selected>Subscription</option>
                                        <option value="1">Address Card</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-3 ps-0">
                                <div class="selectfield d-flex align-items-center">
                                    <span> <i class="fa-solid fa-circle-plus ms-2"></i></span>
                                    <select class="form-select border-0 rounded-5 font-12 inter colorgray" aria-label="Default select example">
                                        <option selected>Status</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-3 ps-0">
                                <div class="selectfield d-flex align-items-center">
                                    <span> <i class="fa-solid fa-circle-plus ms-2"></i></span>
                                    <select class="form-select border-0 rounded-5 font-12 inter colorgray" aria-label="Default select example">
                                        <option selected>Devices</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-3 ps-0">
                                <div class="selectfield d-flex align-items-center">
                                    <span> <i class="fa-solid fa-circle-plus ms-2"></i></span>
                                    <select class="form-select border-0 rounded-5 font-12 inter colorgray" aria-label="Default select example">
                                        <option selected>Device Health</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @foreach ($orders as $order)

            <div class="container bgcolor mt-3 p-3">
                <div class="row">
                    <div class="col-6 align-self-center">
                        <div class="row">
                            <div class="col-6">
                                <div class="d-flex align-items-center mt-2 ms-3">
                                    <div class="form-check">
                                        <input class="form-check-input fs-5" type="checkbox" value="" id="flexCheckDefault">
                                        <label class="form-check-label" for="flexCheckDefault">
                                        </label>
                                    </div>




                                    <div class="ms-3">
                                        <h6 class='font-18 font-600 inter colorblack'>{{ $order->device_name }}</h6>
                                        <p class='font-16 inter colorgray'>{{ $order->details }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 align-self-center text-center">
                                <button class='btn-activgareen rounded-5 px-4 py-2 fw-medium font-14 text-capitalize'>
                                    {{ $order->status == 0 ? 'Active' : 'Inactive' }}
                                </button>
                            </div>

                        </div>
                    </div>
                    <div class="col-6">
                        <div class="row">
                            <div class="col-6">
                                <div class="d-flex mt-3">
                                    <i class="fa-solid fa-toggle-on fs-5"></i>
                                    <p class="font-12 inter mb-0 colorgray ms-3">https://www.timelink.live/78/5545d55d</p>
                                </div>
                                <div class="d-flex mt-3">
                                    <i class="fa-solid fa-hand-holding-heart fs-5"></i>
                                    <p class="font-12 inter mb-0 colorgray ms-3">Leased</p>
                                </div>
                                <div class="d-flex mt-3">
                                    <i class="fa-solid fa-download fs-5"></i>
                                    <p class="font-12 inter mb-0 colorgray ms-3">Version 1</p>
                                </div>
                            </div>
                            <div class="col-6 text-center align-self-center">
                                <button class='btn-Report rounded-5 px-3 py-2 fw-medium font-14 text-capitalize'
                                data-bs-toggle="modal" data-bs-target="#exampleModaltwo" data-device-id="{{ $order->id }}">
                                Report Problem
                            </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
        <!-- Modal -->
        <div class="modal fade p-4 modaltwo" id="exampleModaltwo" tabindex="-1" aria-labelledby="exampleModaltwoLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <form method="POST" action="report_problem" enctype="multipart/form-data">
                    @csrf
                <div class="modal-content">
                    <div class="modal-body p-3">
                        <div class="row">
                            <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">
                            <input type="hidden" name="device_id" id="device-id" >

                            <h3 class="font-18 font-600 inter colorblack">Report a Problem</h3>
                            <div class="col-6">
                                <label for="exampleFormControlInput1"
                                    class="form-label font-14 inter colorblack">Reason*</label>
                                <select name="reason" class="form-select rounded-5 inputgroup" aria-label="Default select example">
                                    <option selected>Select</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                            </div>
                            <div class="col-6">
                                <div class="mb-3">
                                    <label for="exampleFormControlInput1"
                                        class="form-label font-14 inter colorblack">Subject* </label>
                                    <input name="subject" type="text" class="form-control rounded-5 inputgroup"
                                        id="exampleFormControlInput1" placeholder="Write a subject">
                                </div>
                            </div>
                            <div class="col-12">
                                <label for="exampleFormControlInput1"
                                    class="form-label font-14 inter colorgray">Serial Number*</label>
                                <select name="serial_no" class="form-select rounded-5 inputgroup" aria-label="Default select example">
                                    <option selected>Open this select menu</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                            </div>
                            <div class="col-8 mt-3">
                                <div class="mb-3">
                                    <label for="exampleFormControlTextarea1"
                                        class="form-label font-14 inter colorblack">Query*</label>
                                        <input type="text" name="query" class="form-control inputgroup" id="exampleFormControlTextarea1" placeholder="" style="resize: none; height: 160px;">

                                </div>
                            </div>
                            <div class="col-4 mt-3">
                                <div class="">
                                    <label for="" class="form-label font-14 inter colorgray">Logo</label>
                                    <div class="inputgroup1 rounded-5 p-4 text-center">
                                        <label for="file">
                                            <div class="">
                                                <h6 class="font-10 font-600 inter colorblack mt-2 point">Drag & drop
                                                    files or <span
                                                        class="colorblue text-decoration-underline">Browse</span>
                                                </h6>
                                                <p class="mb-0 mt-2 font-10 colorgray inter point">Supported
                                                    formats: <br>
                                                    JPEG, PNG, GIF, MP4, PDF, PSD, AI, Word, PPT
                                                </p>
                                            </div>
                                        </label>
                                        <input type="file" name="logo[]" id="file" class="d-none" multiple>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="exampleFormControlInput1"
                                        class="form-label font-15 font-500 inter colorblack">Email*</label>
                                    <input type="email" name="email" class="form-control rounded-5 inputgroup"
                                        id="exampleFormControlInput1" placeholder="">
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <input type="submit" class="btn-Report rounded-4 p-2 px-5 py-2 fw-medium font-14 text-capitalize"
                            value="Got it!">
                            <input type="submit" class="btn-blue rounded-4 p-2 px-5 py-2 fw-medium font-14 text-capitalize"
                            value="Got it!">
                        </div>
                    </div>
                </div>
                </form>
            </div>
        </div>

<!-- ------------bootstrap---------js--------- -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>

<!-- Include your custom scripts -->
<script src="scripts/script.js"></script>
<script>
    $(document).ready(function () {
        $('#exampleModaltwo').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var deviceId = button.data('device-id');
            $('#device-id').val(deviceId);
        });
    });
</script>
<script>
    $(document).ready(function () {
        @if(session('success'))
        // Show a success message pop-up
        alert("{{ session('success') }}");
        @endif

        @if(session('error'))
        // Show an error message pop-up
        alert("{{ session('error') }}");
        @endif
    });
</script>

@endsection