@extends('layouts.admin')

@section('content')
<link rel="stylesheet" href="{{ asset('assets/css/select2.min.css') }}">
<script src="{{ asset('assets/ckeditor/ckeditor.js') }}"></script>

<section class="pc-container">
    <div class="pc-content">
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('packages') }}">Packages</a>
                            </li>
                            <li class="breadcrumb-item" aria-current="page">Package</li>
                        </ul>
                    </div>
                    <div class="col-md-12">
                        <div class="page-header-title">
                            <h3 class="mb-0">Package</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row pt-0">

            @if(isset($package))
            <form action="{{ route('update-package') }}" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id" value="{{ $package->id }}">
                @else
                <form action="{{ route('store-package') }}" method="post" enctype="multipart/form-data">
                    @endif
                    @csrf
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body pt-2">
                                @include('include.errors')
                                <div class="row">
                                    <div class="col-md-6">
                                        @php $title=""; @endphp
                                        @if(old('title'))
                                        @php $title=old('title'); @endphp
                                        @elseif(isset($package))
                                        @php $title=$package->title; @endphp
                                        @endif
                                        <div class="form-group">
                                            <label class="form-label">Title <span class="text-danger">*</span></label>
                                            <input required name="title" type="text" class="form-control" placeholder="Package name" value="{{ old('title', $package->title) }}" autofocus>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        @php $alias=""; @endphp
                                        @if(old('alias'))
                                        @php $alias=old('alias'); @endphp
                                        @elseif(isset($package))
                                        @php $alias=$package->alias; @endphp
                                        @endif
                                        <div class="form-group">
                                            <label class="form-label">Alias</label>
                                            <input name="alias" type="text" class="form-control" placeholder="Will be auto generated if left blank" value="{{ old('alias', $package->alias) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-3 form-group mb-12">
                                        @php $package_detail_id=0; @endphp
                                        @if(old('package_detail_id'))
                                        @php $package_detail_id=old('package_detail_id'); @endphp
                                        @elseif(isset($package))
                                        @php $package_detail_id=$package->package_detail_id; @endphp
                                        @endif
                                        <label class="form-label">Package Detail</label>
                                        <select id="package_detail_id" class="form-control" name="package_detail_id" data-bs-toggle="tooltip" data-bs-original-title="Select package detail.">
                                            <option value="">Not Selected</option>
                                            @foreach ($packageDetails as $packageDetail)
                                            <option value="{{ $packageDetail->id }}" {!! ($package_detail_id==$packageDetail->id) ? 'selected' : '' !!}>{{ $packageDetail->package_detail }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <!-- </div>
                                <div class="row"> -->
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            @php $packageType=""; @endphp
                                            @if(old('packageType'))
                                            @php $packageType=old('packageType'); @endphp
                                            @elseif(isset($package))
                                            @php $packageType=$package->packageType; @endphp
                                            @endif
                                            <label class="form-label" for="packageTypeSelect">Package Type <span class="text-danger">*</span></label>
                                            <select name="packageType" class="form-select" id="packageTypeSelect">
                                                <option value="" disabled selected>--- Not Selected ---</option>
                                                @if (is_countable($categories))
                                                @foreach ($categories as $cat)
                                                <option value="{{ $cat->id }}" {!! ($packageType==$cat->id) ? 'selected' : '' !!}>{{ $cat->title }}</option>
                                                @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            @php $type=""; @endphp
                                            @if(old('type'))
                                            @php $type=old('type'); @endphp
                                            @elseif(isset($package))
                                            @php $type=$package->type; @endphp
                                            @endif
                                            <label class="form-label" for="typeSelect">Food Type <span class="text-danger">*</span></label>
                                            <select required name="type" class="form-select" id="typeSelect">
                                                <option value="V" {!! ($type=='V' ) ? 'selected' : '' !!}>Veg</option>
                                                <option value="N" {!! ($type=='N' ) ? 'selected' : '' !!}>Non Veg</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3 totalTiffin">
                                        <div class="form-group">
                                            @php $no_of_tiffins=1; @endphp
                                            @if(old('no_of_tiffins'))
                                            @php $no_of_tiffins=old('no_of_tiffins'); @endphp
                                            @elseif(isset($package))
                                            @php $no_of_tiffins=$package->no_of_tiffins; @endphp
                                            @endif
                                            <label class="form-label">No. of Tiffins <span class="text-danger">*</span></label>
                                            <input name="no_of_tiffins" id="no_of_tiffins" type="text" class="form-control" value="{{ $no_of_tiffins }}">
                                        </div>
                                    </div>
                                    <div class="col-md-3 fromDay">
                                        <div class="form-group">
                                            @php $from_day=""; @endphp
                                            @if(old('from_day'))
                                            @php $from_day=old('from_day'); @endphp
                                            @elseif(isset($package))
                                            @php $from_day=$package->from_day; @endphp
                                            @endif
                                            <label class="form-label" for="fromDaySelect">From Day</label>
                                            <select name="from_day" class="form-select" id="fromDaySelect">
                                                <option value="">--- Not Selected ---</option>
                                                <option value="monday" {!! ($from_day=='monday' ) ? 'selected' : '' !!}>Monday</option>
                                                <option value="tuesday" {!! ($from_day=='tuesday' ) ? 'selected' : '' !!}>Tuesday</option>
                                                <option value="wednesday" {!! ($from_day=='wednesday' ) ? 'selected' : '' !!}>Wednesday</option>
                                                <option value="thursday" {!! ($from_day=='thursday' ) ? 'selected' : '' !!}>Thursday</option>
                                                <option value="friday" {!! ($from_day=='friday' ) ? 'selected' : '' !!}>Friday</option>
                                                <option value="saturday" {!! ($from_day=='saturday' ) ? 'selected' : '' !!}>Saturday</option>
                                                <option value="sunday" {!! ($from_day=='sunday' ) ? 'selected' : '' !!}>Sunday</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3 toDay">
                                        <div class="form-group">
                                            @php $to_day=""; @endphp
                                            @if(old('to_day'))
                                            @php $to_day=old('to_day'); @endphp
                                            @elseif(isset($package))
                                            @php $to_day=$package->to_day; @endphp
                                            @endif
                                            <label class="form-label" for="toDaySelect">To Day</label>
                                            <select name="to_day" class="form-select" id="toDaySelect">
                                                <option value="">--- Not Selected ---</option>
                                                <option value="monday" {!! ($to_day=='monday' ) ? 'selected' : '' !!}>Monday</option>
                                                <option value="tuesday" {!! ($to_day=='tuesday' ) ? 'selected' : '' !!}>Tuesday</option>
                                                <option value="wednesday" {!! ($to_day=='wednesday' ) ? 'selected' : '' !!}>Wednesday</option>
                                                <option value="thursday" {!! ($to_day=='thursday' ) ? 'selected' : '' !!}>Thursday</option>
                                                <option value="friday" {!! ($to_day=='friday' ) ? 'selected' : '' !!}>Friday</option>
                                                <option value="saturday" {!! ($to_day=='saturday' ) ? 'selected' : '' !!}>Saturday</option>
                                                <option value="sunday" {!! ($to_day=='sunday' ) ? 'selected' : '' !!}>Sunday</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="days-section col-12">
                                        <div class="row py-3">
                                            <div class="col-12">
                                                <h5>Days</h5>
                                            </div>
                                            @foreach($days as $day)
                                            <div class="col-xl-3 col-lg-4 col-md-6 col-6 my-2 dayDiv" id="day{{$day['id']}}">
                                                <div class="row">
                                                    <div class="col-6 col-md-5 d-flex align-items-center">
                                                        <div class="form-check form-switch custom-switch-v1">
                                                            <input name="days[]" type="checkbox" class="form-check-input input-primary" id="day{{$day['id']}}" value="{{$day['id']}}" {!! ($day['checked']) ? 'checked' : '' !!}>
                                                            <label class="form-check-label" for="day{{ $day['id'] }}">{{$day['day']}}</label>
                                                        </div>
                                                    </div>
                                                    <div class=" col-4 col-md-4">
                                                        <input type="text" name="day_qty[]" class="form-control quantity-field day_qty" placeholder="Quantity" value="{{$day['qty']}}" data-bs-toggle="tooltip" data-bs-original-title="Save changes">
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <!-- </div>
                                    <div class="row"> -->

                                    <div class="col-md-3">
                                        <div class="form-group">
                                            @php $price=0; @endphp
                                            @if(old('price'))
                                            @php $price=old('price'); @endphp
                                            @elseif(isset($package))
                                            @php $price=$package->price; @endphp
                                            @endif
                                            <label class="form-label">Price <span class="text-danger">*</span></label>
                                            <input required name="price" type="text" class="form-control" placeholder="Package price" value="{{ old('price', $package->price) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            @php $visible_for=''; @endphp
                                            @if(old('visible_for'))
                                            @php $visible_for=old('visible_for'); @endphp
                                            @elseif(isset($package))
                                            @php $visible_for=$package->visible_for; @endphp
                                            @endif
                                            <label class="form-label">Visible For <span class="text-danger">*</span></label>
                                            <select name="visible_for" id="visible-for-select" class="form-select cursor-p">
                                                <!-- <option value="">Not Selected</option> -->
                                                <option value="A" {!! ($visible_for=='A' ) ? 'selected' : '' !!}>All</option>
                                                <option value="I" {!! ($visible_for=='I' ) ? 'selected' : '' !!}>Individual</option>
                                            </select>
                                        </div>
                                    </div>
                                    <!-- </div>

                                <div class="row"> -->
                                    <div class="col-md-6">
                                        <div id="individual-customers-div" class="form-group {!! ($visible_for=='I' ) ? '' : 'd-none' !!}">
                                            @php $tags=[]; @endphp
                                            @if(old('tags'))
                                            @php $tags=old('tags'); @endphp
                                            @elseif(isset($package))
                                            @php $tags=($package->package_customers) ? $package->package_customers->pluck('customer_id')->toArray() : []; @endphp
                                            @endif
                                            <label class="form-label">Individual Customers <span class="text-danger">*</span></label>

                                            <select id="customer-select" class="form-control" name="tags[]" multiple>
                                                @foreach ($customers as $customer)
                                                <option value="{{ $customer->id }}" {!! in_array($customer->id,$tags) ? 'selected' : '' !!}>{{ $customer->accountId . ' ' . $customer->firstName . ' ' . $customer->lastName }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            @php $description=''; @endphp
                                            @if(old('description'))
                                            @php $description=old('description'); @endphp
                                            @elseif(isset($package))
                                            @php $description=$package->description; @endphp
                                            @endif
                                            <label class="form-label">Description</label>
                                            <textarea id="content" name="description" class="form-control">{{ old('description', $package->description) }}</textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label">Photo</label>
                                            <input name="photo" class="form-control" type="file" accept="image/*" onchange="loadFile(event)">
                                        </div>

                                        <!-- <img class="img-fluid d-none" src="" id="output"> -->
                                        <div id="no-photo" class="text-muted mt-5"></div>

                                        @if (isset($package) && $package->photo != NULL)
                                        <a href="{{ $package->photo }}" target="_blank">
                                            <img class="img-fluid" src="{{ $package->photo }}" alt="" id="output">
                                        </a>
                                        @else
                                        <img class="img-fluid" src="" alt="" id="output">
                                        @endif
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12" data-bs-toggle="tooltip">
                                        @php $active=''; @endphp
                                        @if(old('active'))
                                        @php $active='checked'; @endphp
                                        @elseif(isset($package) && $package->active==1)
                                        @php $active='checked'; @endphp
                                        @endif
                                        <div class="form-check form-switch custom-switch-v1">
                                            <input name="active" type="checkbox" class="form-check-input input-primary" id="activeCheckbox" value='1' {{ $active }}>
                                            <label class="form-check-label" for="activeCheckbox">Active</label>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="card">
                            <div class="card-header p-3">Items</div>
                            <div class="card-body pt-2">
                                @if (is_countable($items))
                                <!-- <table class="table"> -->
                                <!-- <tr class="">
                                        <th class=" border-0">Item</th>
                                        <th class=" border-0">Quantity</th>
                                    </tr> -->
                                <div class="row">
                                    @foreach ($items as $item)
                                        <div class="col-4 my-2">
                                            <div class="row">
                                                <div class="col-6 d-flex align-items-center">
                                                    <div class="form-check form-switch custom-switch-v1">
                                                        <input
                                                            name="item[]"
                                                            type="checkbox"
                                                            class="form-check-input input-primary"
                                                            id="item{{ $loop->index }}"
                                                            value="{{ $item->id }}"
                                                            {{ in_array($item->id, old('item', $assigned_item_ids)) ? 'checked' : '' }}
                                                        >
                                                        <label class="form-check-label" for="item{{ $loop->index }}">{{ $item->title }}</label>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <input
                                                        type="text"
                                                        name="{{ $item->id }}"
                                                        class="form-control quantity-field"
                                                        placeholder="Quantity"
                                                        value="{{ old($item->id, $item->quantity) }}"
                                                        data-bs-toggle="tooltip"
                                                        data-bs-original-title="Save changes"
                                                    >
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <!-- </table> -->
                                @endif
                            </div>
                        </div>
                    </div>
                    <input type="submit" value="Save" class="btn btn-primary m-t-20 m-b-20" data-bs-toggle="tooltip" data-bs-original-title="Save changes">
                </form>
        </div>
    </div>
</section>

<script src="{{ asset('assets/js/select2.min.js' ) }}"></script>

<script>
    CKEDITOR.replace('content', {
        filebrowserUploadUrl: "{{ route('ck-upload', ['_token' => csrf_token()]) }}",
        filebrowserUploadMethod: 'form'
    });

    var loadFile = function(event) {
        var output = document.getElementById('output');
        document.getElementById('no-photo').classList.add('d-none');
        output.classList.remove('d-none');
        output.src = URL.createObjectURL(event.target.files[0]);
        output.onload = function() {
            URL.revokeObjectURL(output.src) // free memory
        }
    };

    $(document).ready(function() {

        id = $('#packageTypeSelect').val();
        if (id == 3) {
            $('.totalTiffin').hide();
            $('.fromDay').hide();
            $('.toDay').hide();
            $('.days-section').hide();
        } else {
            $('.totalTiffin').show();
            $('.fromDay').show();
            $('.toDay').show();
        }
        setTimeout(() => {
            updateDays();
        }, 500);

        $('.days-section').hide();
        // $('#customer-select').select2();

        // $('#customer-select').select2({
        //     placeholder: 'Enter customer',
        //     tags: true,
        // });

        // select countries
        $("#customer-select").select2({
            ajax: {
                url: "{{ route('payments.getUsers') }}",
                type: "get",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        searchTerm: params.term // search term

                    };
                },
                processResults: function(response) {
                    return {
                        results: response

                    };
                },
                cache: true
            }
        });

        // $('#customer-select').change(function() {
        //     let x = $("#customer-select").select2('data');
        //     let arr = [];

        //     x.forEach(function(v, i, e) {
        //         arr.push(e[i].id);
        //     })

        //     $('#tags').val(arr);
        // });

        $('#visible-for-select').change(function() {
            $('#individual-customers-div').addClass('d-none');
            if ($('#visible-for-select').val() == 'A') {
                $('#individual-customers-div').addClass('d-none');
            } else if ($('#visible-for-select').val() == 'I') {
                $('#individual-customers-div').removeClass('d-none');
            }
        })
    })

    $(document).on('change', '#packageTypeSelect', function() {
        id = $(this).val();
        if (id == 3) {
            $('.totalTiffin').hide();
            $('.fromDay').hide();
            $('.toDay').hide();
            $('.days-section').hide();
        } else {
            $('.totalTiffin').show();
            $('.fromDay').show();
            $('.toDay').show();
        }
    })

    $(document).on('change', '#fromDaySelect', function() {
        updateDays();
    })

    $(document).on('change', '#toDaySelect', function() {
        updateDays();
    })

    function updateDays() {
        var daysOfWeek = [{
                value: 'monday'
            },
            {
                value: 'tuesday'
            },
            {
                value: 'wednesday'
            },
            {
                value: 'thursday'
            },
            {
                value: 'friday'
            },
            {
                value: 'saturday'
            },
            {
                value: 'sunday'
            }
        ];

        $('.days-section').hide();
        $('.dayDiv').hide();
        fromDay = $('#fromDaySelect').val();
        toDay = $('#toDaySelect').val();

        var from = daysOfWeek.findIndex(day => day.value === fromDay);
        var to = daysOfWeek.findIndex(day => day.value === toDay);
        console.log(from);
        if (from >= 0 && to >= 0) {
            from++;
            to++;
            console.log(from);
            $('.days-section').show();
            for (from; from <= to; from++) {
                $('#day' + from).show();
            }
        }
    }
</script>
@endsection