@extends('layouts.master')

@section('title')
Violation detail
@endsection

@section('content')

<div class="main-container container-fluid">

    <!-- PAGE-HEADER Breadcrumbs-->
    <div class="page-header">
        <h1 class="page-title">Violation detail</h1>
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{url('/dashboard')}}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{url('/violation/list')}}">Violation list</a></li>
                <li class="breadcrumb-item active" aria-current="page">Violation detail</li>
            </ol>
        </div>
    </div>
    <!-- PAGE-HEADER END -->

    <!-- ROW-1 OPEN -->
    <div class="row">
        <div class="col-lg-12 p-3">
            <!-- <h5 class="fw-bold mb-1 text-buzono">Detail information :</h5> -->
            <div class="card">
                <div class="card-body p-0 px-5 pt-5 pb-0">
                    <div class="row ">

                        <div class="col-6"> 
                            <p class="h3 fw-bold text-buzono mb-0">Violation</p>
                            <p class="text-gray fst-italic">{{strtoupper($violation->violation_types)}}</p>
 
                        </div>
                        <div class="col-6 text-end">
                            <!-- <p class="h3 fw-bold text-buzono">Violation To</p>  -->
                            @if($violation->status == 1)
                            <span class="badge bg-primary rounded-pill px-3  fs-15">New</span>
                            @elseif($violation->status == 2)
                            <span class="badge bg-info rounded-pill px-3  fs-15">Already paid</span>

                            @elseif($violation->status == 3)
                            <span class="badge bg-warning rounded-pill px-3  fs-15">Take no action</span>

                            @elseif($violation->status == 4)
                            <span class="badge bg-secondary rounded-pill px-3  fs-15">Request to pay</span>

                            @elseif($violation->status == 5)
                            <span class="badge bg-danger rounded-pill px-3  fs-15">Invalid violation</span>

                            @else
                            <span class="badge bg-success rounded-pill px-3  fs-15">Paid</span>

                            @endif



                        </div> 
                        <div class="col-lg-6">
                            <p class="fs-18 fw-semibold mb-0">{{ucwords($user->first_name)}} {{ucwords($user->last_name)}}</p>
                            <address>
                                {{ucwords($user->address)}} <br>
                                {{ucwords($user->state)}}, {{ucwords($user->city)}}<br>
                                {{$user->zip}}<br>
                                <span class="fst-italic">{{$user->email}}</span>
                                <p> <span class="fw-bold">Country:</span> {{ucwords($user->country)}}</p>
                            </address>
                        </div>
                        <div class="col-lg-6 text-end border-bottom border-lg-0 ">
                            <h5><span class="fw-bold">Date Issued:</span> {{date('d-m-Y , H:i:s a',strtotime($violation->created_at))}}</h5>
                            <h5><span class="fw-bold">Due Date:</span> {{$violation->due_date}}</h5>
                            <h5><span class="fw-bold">Due fine:</span> $ {{$violation->due_fine}}</h5>
                            <h5><span class="fw-bold">late fine:</span> $ {{$violation->late_fine}}</h5>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <h5 class="fw-bold mb-1 text-buzono">Note / Description :</h5>

                            <p class=" fs-14 border-start border-end border-top rounded-3 px-3">
                            {{ucwords($violation->notes)}}
                            </p>
                        </div>
                    </div>

                    <div class="row">
                        <h5 class="fw-bold mb-1 text-buzono">Files :</h5>
                        @if($files != "Empty")
                            @foreach($files as $file)
                                @if(in_array($file->ext,$imgExt))
                                <div class="col-lg-2">
                                    <div class="card rounded-3 px-1">
                                        <div class="card-body p-0">
                                            <div class=" text-center">
                                            <img src="{{asset('uploads/files/'.$file->filename)}}" title="{{$file->name}}" height="104px" alt=""> 
                                                <div class="mt-2">
                                                    <a href="{{asset('uploads/files/'.$file->filename)}}" title="{{$file->name}}" download><i class="fe fe-download mx-2"></i> Download</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                @if(in_array($file->ext,$docExt))
                                <div class="col-lg-2">
                                    <div class="card rounded-3 p-0">
                                        <div class="card-body">
                                            <div class=" text-center">
                                                <div class=" text-center  mb-4 text-primary" title="{{$file->name}}"><i class="fe fe-file " style="font-size: 70px;"></i>
                                                </div>
                                                <div class="">
                                                    <a href="{{asset('uploads/files/'.$file->filename)}}" title="{{$file->filename}}" download><i class="fe fe-download mx-2"></i>Download</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            @endforeach
                        @endif
                    </div>
                    <div class="row">
                        @if(Auth::user()->hasRole('Client'))
                            @if($violation->status == 1)
                                <div class="col mb-4 text-end">
                                    <a db-id="{{$violation->id}}"  value="2" class="btn btn-info text-white btnRequest">Already paid</a>
                                    <a db-id="{{$violation->id}}" value="3"  class="btn btn-warning text-white btnRequest1">Take no action</a>
                                    <a db-id="{{$violation->id}}" value="4" class="btn btn-secondary text-white btnRequest">Request to pay</a>
                                    <a db-id="{{$violation->id}}"  value="5" class="btn btn-danger text-white btnRequest">Invalid violation</a>
                                </div>
                            @endif
                        @endif 
                        @if(Auth::user()->hasRole('Admin'))
                            @if($violation->status == 4)
                                <div class="col mb-4 text-end">
                                    <a db-id="{{$violation->id}}"  value="6" class="btn btn-success text-white btnRequest">Paid</a>
                                    <a db-id="{{$violation->id}}"  value="7" class="btn btn-danger text-white btnRequestPaid">Update Credit card</a>

                                </div>
                            @endif
                            @if($violation->status == 7)
                                <div class="col mb-4 text-end">
                                    <a db-id="{{$violation->id}}"  value="6" class="btn btn-success text-white btnRequest">Paid</a>

                                </div>
                            @endif
                        @endif 
                    </div>
                </div>
            </div>
        </div>
        <!-- COL-END -->
    </div>

    <!-- COL-END -->
</div>
<!-- ROW-1 CLOSED -->
@endsection

@section('bottom-script')
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
   
$(document).ready(function(e){

    $(document).on('click', '.btnRequest', function (e) {
        // alert('hello')
        Swal.fire({
                title: "Are you sure?",
                text: "Updating the violation status cannot be changed once submitted!",
                type: "warning",
                buttons: true,
                confirmButtonColor: "#14a1ff",
                confirmButtonText: "Yes, do it!",
                cancelButtonColor: "#ff5e5e",
                closeOnConfirm: false,
                dangerMode: true,
                showCancelButton: true
            })
            .then((result) => {
                if (result.isConfirmed) {
                    var id = $(this).attr('db-id');
                    var value =$(this).attr('value');
                    $.ajax({
                        url: '/api/violationReq/' +id,
                        type: "get",
                        dataType: "JSON",
                        data:{
                            value:value
                        },
                        success: function (response) {

                            if (response["status"] == "fail") {
                                Swal.fire("Failed!", "Failed to Update violation.",
                                    "error");

                            } else if (response["status"] == "success") {
                                Swal.fire("Updated!", "Your violation status has been updated successfully.",
                                    "success");
                                    location.reload();
                                
                            }
                        },
                        error: function (error) {
                            console.log(error);
                        },
                        async: false
                    });
                } else {
                    Swal.close();
                }
            });
    });

    $(document).on('click', '.btnRequest1', function (e) {
        // alert('hello')
        Swal.fire({
                title: "Are you sure?",
                text: "Taking no action on this violation can lead to late fees, suspensions and more",
                type: "warning",
                buttons: true,
                confirmButtonColor: "#14a1ff",
                confirmButtonText: "Yes, do it!",
                cancelButtonColor: "#ff5e5e",
                closeOnConfirm: false,
                dangerMode: true,
                showCancelButton: true
            })
            .then((result) => {
                if (result.isConfirmed) {
                    var id = $(this).attr('db-id');
                    var value =$(this).attr('value');
                    $.ajax({
                        url: '/api/violationReq/' +id,
                        type: "get",
                        dataType: "JSON",
                        data:{
                            value:value
                        },
                        success: function (response) {

                            if (response["status"] == "fail") {
                                Swal.fire("Failed!", "Failed to Update violation.",
                                    "error");

                            } else if (response["status"] == "success") {
                                Swal.fire("Updated!", "Your violation status has been updated successfully.",
                                    "success");
                                    location.reload();
                                
                            }
                        },
                        error: function (error) {
                            console.log(error);
                        },
                        async: false
                    });
                } else {
                    Swal.close();
                }
            });
    });

    $(document).on('click', '.btnRequestPaid', function (e) {
        // alert('hello')
        Swal.fire({
                title: "Are you sure?",
                // text: "Updating the violation status cannot be changed once submitted",
                type: "warning",
                buttons: true,
                confirmButtonColor: "#14a1ff",
                confirmButtonText: "Yes, do it!",
                cancelButtonColor: "#ff5e5e",
                closeOnConfirm: false,
                dangerMode: true,
                showCancelButton: true
            })
            .then((result) => {
                if (result.isConfirmed) {
                    var id = $(this).attr('db-id');
                    var value =$(this).attr('value');
                    alert(value)
                    $.ajax({
                        url: '/api/violationReq/' +id,
                        type: "get",
                        dataType: "JSON",
                        data:{
                            value:value
                        },
                        success: function (response) {

                            if (response["status"] == "fail") {
                                Swal.fire("Failed!", "Failed to Update request.",
                                    "error");

                            } else if (response["status"] == "success") {
                                Swal.fire("Updated!", "Your request status has been updated successfully.",
                                    "success");
                                    location.reload();
                                
                            }
                        },
                        error: function (error) {
                            console.log(error);
                        },
                        async: false
                    });
                } else {
                    Swal.close();
                }
            });
    });
})
    
</script>
@endsection