@extends('admin::layouts.app')

@section('content')
    <section class="content mb-5">
        <div class="container-fluid">
            <form class="form" id="staff-slot-availability" role="post-data" method="POST"
                action="/api/admin/staff/slot-availability" redirect="/admin/staff/slot-availability/{{ $branch->id }}"
                enctype="multipart/form-data">
                <input type="hidden" name="workshop_id" value="{{ $branch->id }}">
                <div class="row titlepad publsih-sticky">
                    <div class="col-md-12">
                        <div class="mt-3 mb-3">
                            <div class="dashbed-border-bottom"></div>
                        </div>
                        <div class="row">
                            <div class="col-sm-8">
                                <h4>Add Availability </h4>
                                <p class="page-sub-head">Add Working Slot Availability</p>
                            </div>
                            <div class="col-md-4 text-sm-right mt-2">
                                <button type="button" class="btn-md px-3 py-2 btn-primary" role="button"
                                    data-request="ajax-submit" data-target="[role=post-data]"><i
                                        class="fa fa-check-square-o"></i> {{ __('admin.submit') }}</button>
                                <a href="javascript:history.back()" class="btn-md px-3 py-2 btn-secondary"><i
                                        class="fa fa-chevron-circle-left"></i> {{ __('static.cancel') }}</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row titlepad publsih-sticky">
                    <div class="col-md-12">
                        <div class="mt-3 mb-3">
                            <div class="dashbed-border-bottom"></div>
                        </div>
                        <div class="row">
                            <div class="col-sm-8">
                            </div>
                            <div class="col-md-4 text-sm-right mt-2">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-8">
                        <div class="tabData mt-4">
                            <h4>Branch : {{ $branch->name_en }} </h4>
                            <br>
                            <h6>Enter the details below for create/edit day slots</h6>
                            <div class="mt-2 mb-2">
                                <div class="dashbed-border-bottom"></div>
                            </div>
                            <div class="pb-4">
                                <div class="row">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered admintable border-0 working-table"
                                            cellspacing="0" cellpadding="0">
                                            <thead>
                                                <tr>
                                                    <th>Sr.No.</th>
                                                    <th>{{ __('label.weekday') }}</th>
                                                    <th>{{ __('label.from_time') }}</th>
                                                    <th>{{ __('label.to_time') }}</th>
                                                    <th>{{ __('label.status') }}</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody id="workHoursTableBody">
                                                @php
                                                    $index = 1;
                                                @endphp
                                                @foreach ($branchWorkHours as $branchWorkHour)
                                                    <tr class="branch-row" id="row{{ $index }}">
                                                        <td>{{ $index }}</td>
                                                        <td>{{ ucfirst($branchWorkHour->day) }}
                                                            <input type="hidden"
                                                                name="data[{{ $branchWorkHour->id }}][{{ $index }}][day]"
                                                                value="{{ ucfirst($branchWorkHour->day) }}">
                                                        </td>
                                                        <td><input type="time" class="form-control border"
                                                                placeholder="{{ __('placeholder.enter_am_time') }}"
                                                                name="data[{{ $branchWorkHour->id }}][{{ $index }}][from_time]"
                                                                value="{{ optional($branchWorkHour->staffAvailability)->from_time ? \Carbon\Carbon::parse($branchWorkHour->staffAvailability->from_time)->format('H:i') : '' }}" />
                                                        </td>
                                                        <td><input type="time" class="form-control border"
                                                                placeholder="{{ __('placeholder.enter_pm_time') }}"
                                                                name="data[{{ $branchWorkHour->id }}][{{ $index }}][to_time]"
                                                                value="{{ optional($branchWorkHour->staffAvailability)->to_time ? \Carbon\Carbon::parse($branchWorkHour->staffAvailability->to_time)->format('H:i') : '' }}" />
                                                        </td>
                                                        <td>
                                                            <select class="form-control selectpicker"
                                                                name="data[{{ $branchWorkHour->id }}][{{ $index }}][status]">
                                                                @foreach ($status as $val)
                                                                    <option value="{{ $val }}"
                                                                        {{ isset($branchWorkHour->staffAvailability->status) && $branchWorkHour->staffAvailability->status == $val ? 'selected' : '' }}>
                                                                        {{ ucwords($val) }}</option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                        <td>
                                                            {{-- <button type="button" class="form-control border btn-primary"
                                                                onclick="addRow({{ $index }})">+</button>
                                                            <button type="button" class="form-control border btn-danger"
                                                                onclick="removeRow({{ $index }})">-</button> --}}
                                                        </td>
                                                    </tr>
                                                    @php
                                                        $index++;
                                                    @endphp
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
@endsection

@section('script')
    <script>
        function addRow(index) {
            var lastRow = $("#workHoursTableBody .branch-row#row" + index + ":last");
            var newRow = lastRow.clone();

            var rowId = parseInt(newRow.attr('id').replace('row', ''));
            var newRowId = rowId + 1;
            newRow.attr('id', 'row' + newRowId);

            newRow.find('input[type="time"]').each(function() {
                var inputName = $(this).attr('name');
                $(this).attr('name', inputName.replace('[' + rowId + ']', '[' + newRowId + ']')).val('');
            });

            newRow.find('select').each(function() {
                var selectName = $(this).attr('name');
                $(this).attr('name', selectName.replace('[' + rowId + ']', '[' + newRowId + ']'));
            });

            newRow.find('input[type="hidden"]').each(function() {
                var hiddenName = $(this).attr('name');
                $(this).attr('name', hiddenName.replace('[' + rowId + ']', '[' + newRowId + ']')).val('');
            });

            newRow.find('#addRow').attr('onclick', 'addRow(' + newRowId + ')');
            newRow.find('#removeRow').attr('onclick', 'removeRow(' + newRowId + ')');

            lastRow.after(newRow);

            $("#workHoursTableBody .branch-row:gt(" + index + ")").each(function() {
                var currentRowId = parseInt($(this).attr('id').replace('row', ''));
                $(this).attr('id', 'row' + (currentRowId + 1));

                $(this).find('input[type="time"]').each(function() {
                    var inputName = $(this).attr('name');
                    $(this).attr('name', inputName.replace('[' + currentRowId + ']', '[' + (currentRowId +
                        1) + ']'));
                });

                $(this).find('select').each(function() {
                    var selectName = $(this).attr('name');
                    $(this).attr('name', selectName.replace('[' + currentRowId + ']', '[' + (currentRowId +
                        1) + ']'));
                });

                $(this).find('input[type="hidden"]').each(function() {
                    var hiddenName = $(this).attr('name');
                    $(this).attr('name', hiddenName.replace('[' + currentRowId + ']', '[' + (currentRowId +
                        1) + ']'));
                });

                $(this).find('#addRow').attr('onclick', 'addRow(' + (currentRowId + 1) + ')');
                $(this).find('#removeRow').attr('onclick', 'removeRow(' + (currentRowId + 1) + ')');
            });
        }

        function removeRow(index) {
            var branchRows = $("#workHoursTableBody .branch-row#row" + index);

            if (branchRows.length > 1) {
                branchRows.last().remove();

                $("#workHoursTableBody .branch-row:gt(" + (index - 1) + ")").each(function() {
                    var currentRowId = parseInt($(this).attr('id').replace('row', ''));
                    $(this).attr('id', 'row' + (currentRowId - 1));

                    $(this).find('input[type="time"]').each(function() {
                        var inputName = $(this).attr('name');
                        $(this).attr('name', inputName.replace('[' + currentRowId + ']', '[' + (
                            currentRowId - 1) + ']'));
                    });

                    $(this).find('select').each(function() {
                        var selectName = $(this).attr('name');
                        $(this).attr('name', selectName.replace('[' + currentRowId + ']', '[' + (
                            currentRowId - 1) + ']'));
                    });
                });
            }
        }
    </script>
@endsection