@extends('layouts.master')
@section('meta')
<meta name="csrf-token" content="{{ csrf_token() }}">
@stop
@section('content')
<div class="col-lg-12 grid-margin stretch-card" style="min-height: 90vh;">
    <div class="card">
        <div class="card-body">
            <div class="page-header">
                <h3 class="page-title">Orders</h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('home')}}">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Orders</li>
                    </ol>
                </nav>
            </div>
            <div class="col-lg-12 d-flex flex-row justify-content-between p-2">
                <div>
                    <form class="d-flex" method="GET" action="{{ route('orders.index') }}">
                        <input class="me-2" name="query" type="search" placeholder="Search" aria-label="Search" value="{{ request('query') }}">
                        <button class="btn btn-outline-primary" type="submit">Search</button>
                    </form>
                </div>
                <div><a type="button" class="btn btn-primary manage-category" href="{{ route('orders.create') }}" >Create Invoice</a></div>
            </div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th> Order # </th>
                        <th> Order Date </th>
                        <th> Customer Name </th>
                        <th> Order Status </th>
                        <th> Source </th>
                        <th> Address </th>
                        <th> Amount </th>
                        <th> Amount Due </th>
                        <th> Email Sent </th>
                        <th>  </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($orders as $order)
                    <tr>
                        <td> <a href="{{ route('orders.edit', $order->id) }}">{{$order->order_no}}</a> </td>
                        <td> {{date("d M, Y h:i a", strtotime($order->created_at))}} </td>
                        <td> <a href="{{ route('customers.edit', $order->customer_id) }}">{{$order->customer_name}}</a> </td>
                        <td style="color: blue;font-weight: 700;">
                            @switch($order->status)
                                @case('pending payment')
                                    <span class="badge badge-pill badge-danger">{{strtoupper($order->status)}}</span>
                                    @break
                                @case('pending')
                                    <span class="badge badge-pill badge-success">{{strtoupper('Order Placed')}}</span>
                                    @break
                                @case('collected')
                                    <span class="badge badge-pill badge-warning">{{strtoupper($order->status)}}</span>
                                    @break
                                @case('inprogress')
                                    <span class="badge badge-pill" style="border: 1px solid #6C3483;color: #6C3483;">{{strtoupper($order->status)}}</span>
                                    @break
                                @case('invoiced')
                                    <span class="badge badge-pill badge-info">{{strtoupper($order->status)}}</span>
                                    @break
                                @case('paid')
                                    <span class="badge badge-pill" style="border: 1px solid #34d8eb;color: #34d8eb;">{{strtoupper($order->status)}}</span>
                                    @break
                                @case('shipped')
                                    <span class="badge badge-pill" style="border: 1px solid #00796B;color: #00796B;">{{strtoupper($order->status)}}</span>
                                    @break
                                @case('delivered')
                                    <span class="badge badge-pill badge-primary">{{strtoupper($order->status)}}</span>
                                    @break
                                @case('cancelled')
                                    <span class="badge badge-pill badge-secondary">{{strtoupper($order->status)}}</span>
                                    @break
                            @endswitch
                        </td>
                        <td><b> {!! strtolower($order->source) == 'web' ? '<span title="Web" role="button" class="mdi mdi-web mdi-24px"></span>' : '<span role="button" title="App" class="mdi mdi-cellphone mdi-24px"></span>' !!} </b></td>
                        <td> {!! nl2br(e($order->shipping_address))!!} </td>
                        <td> £{{number_format($order->subtotal, 2)}} </td>
                        <td> <span style="color: red;"><strong>£{{number_format($order->amount_due, 2)}}</strong></span> </td>
                        <td class="text-center">
                            @if($order->email_sent)
                            <i role="button" class="mdi mdi-24px mdi-check-circle text-success"></i>
                            @else
                            <i role="button" class="mdi mdi-24px mdi-close-circle text-danger"></i>
                            @endif
                        </td>
                        <td align="right">
                            <a title="view" class="icon-bg manage-category text-warning" href="{{ route('orders.show', $order->id) }}"><i role="button" class="mdi mdi-24px mdi-note"></i></a>
                            <a title="email" class="icon-bg email-invoice text-primary" data-url="{{route('email.invoice', ['id' => $order->id])}}"><i role="button" class="mdi mdi-24px mdi-email"></i></a>
                            <a title="pdf" href="{{route('orders.pdf', $order->id)}}" class="icon-bg text-danger"><i role="button" class="mdi mdi-24px mdi-file-pdf"></i></a>
                            <a title="edit" class="icon-bg manage-category text-secondary" href="{{ route('orders.edit', $order->id) }}"><i role="button" class="mdi mdi-24px mdi-pencil-box"></i></a>
                            <a title="delete" class="icon-bg delete-order text-danger" data-url="{{ route('orders.destroy', $order->id) }}"><i role="button" class="mdi mdi-24px mdi-delete"></i></a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="pagination justify-content-end pt-2">
                {{ $orders->links('pagination::bootstrap-4') }}
            </div>
        </div>
    </div>
    <div class="modal" id="manageCategory" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg vh-80" role="document">
            <div class="modal-content">
                <form class="forms-sample" id="category-form" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Create Service Category</h5>
                        <a type="button" id="close-c" class="" data-bs-dismiss="modal" aria-label="Close">
                            <i class="mdi mdi-close"></i>
                        </a>
                    </div>
                    <div class="modal-body">
                        <div id="error" class="alert alert-warning" role="alert" style="color: #ff0000;"></div>
                            <input type="hidden" id="id" />
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" class="form-control" name="name" id="name" placeholder="Service Category Name">
                            </div>
                            <div class="form-group">
                                <label for="description">Short Description</label>
                                <textarea class="form-control" name="description" id="description"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="file">Image</label>
                                <input class="form-control" type="file" name="file">
                            </div>
                            <div class="form-group">
                                <label for="file">Banner Image</label>
                                <input class="form-control" type="file" name="banner">
                            </div>
                            <div class="form-group">
                                <label for="description">Description</label>
                                <textarea class="form-control tinymce-editor" name="details" id="details"></textarea>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" id="save" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@stop

@section('scripts')
<script>
    (function($) {
        'use strict';

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

        // $('.manage-category').on('click', function(e) {
        //     var mode = $(this).data('mode');
        //     var action = $(this).data('url');
        //     var idval = $(this).data('id');
        //     var method = "";

        //     $('#id').val(idval);
        //     if(mode == 'add') {
        //         $('#manageCategory').find('.modal-title').text("Create Category");
        //         method = 'POST';
        //     } else {
        //         $('#manageCategory').find('.modal-title').text("Edit Category");
        //         method = 'POST';
        //     }

        //     $('#manageCategory').find('form').attr('action', action);
        //     $('#manageCategory').find('form').attr('method', method);

        //     // Show the modal
        //     $('#manageCategory').modal('show');
        // });

        $('#error').hide();
        $('#category-form').submit(function(e) {
            e.preventDefault();
            const editor = tinymce.get('details');
            var url = $('#manageCategory').find('form').attr('action');
            var method = $('#manageCategory').find('form').attr('method');
            $('#manageCategory').find('form').find('#details').text(editor.getContent());
            var formData = new FormData(this);
            $.ajax({
                url: url,
                type: method,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function(response) {
                    $('#manageCategory').modal('toggle');
                    showSwal('success-message', "Successfully created", true);
                    // console.log(response.message);
                    // Perform any further actions or show success message
                },
                error: function(response) {
                    $('#error').text(response.responseJSON.message).show();
                    console.log(response.responseJSON);
                    // console.log(response.responseJSON.errors);
                    // Display validation errors or perform error handling
                }
            });
        });

        $('#manageCategory').on('show.bs.modal', function() {
            const editor = tinymce.get('details');
            var id = $('#id').val();
            var url = $('#manageCategory').find('form').attr('action');
            $('#manageCategory').find('form').find('#name').val("");
            $('#manageCategory').find('form').find('#description').val("");
            editor.setContent("");
            if(id > 0) {
                $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    $('#manageCategory').find('form').find('#name').val(response.name);
                    $('#manageCategory').find('form').find('#description').val(response.description);
                    // $('#manageCategory').find('form').find('#details').text('<h1>idsdkhksdhf</h1>');
                    if (editor) {
                        editor.setContent(response.details); // Set the retrieved content to the editor
                    }
                },
                error: function(response) {

                }
            });
            }
        });

        $('.delete-order').on('click', function(e) {
            var url = $(this).data('url');
            confirm("Are you sure you want to delete this Order?", url, "DELETE");
        });

        $('.email-invoice').on('click', function(e) {
            var url = $(this).data('url');
            confirm("Are you sure you want to email this Order to customer?", url, "GET", 0);
        });

        tinymce.init({
            selector: '.tinymce-editor',
            plugins: 'anchor autolink link lists',
            toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link | align lineheight | checklist numlist bullist indent outdent',
        });
    })(jQuery);
</script>
@stop