@extends('layouts.app')
@section('page-title', 'Service')

@section('page-header')
    <div class="page-header">
        <div class="row">
            <div class="col-6">
                <h4 class="header-title">Service Prices</h4>
            </div>
            <div class="col-6">
                <div class="action-section">
                    <a class="btn btn-default load-modal" href="{{ route('zones.index', $courierService->id) }}">
                        Zones
                    </a>
                    <a class="btn btn-default load-modal" href="{{ route('weight-classes.index', $courierService->id) }}">
                        {{-- <i class="anticon anticon-plus"></i> --}}
                        Weight Classes
                    </a>
                    <a class="btn btn-primary load-modal"
                        href="{{ route('customer-service-prices.index', [$courierService->courier->id, $courierService->id]) }}">
                        Customer Prices
                    </a>
                </div>
            </div>
        </div>

        <div class="header-sub-title mt-1">
            <nav class="breadcrumb breadcrumb-dash">
                <a href="{{ route('home') }}" class="breadcrumb-item">Dashboard</a>
                <a href="{{ route('service-prices.index') }}" class="breadcrumb-item">Service Prices</a>
                <a href="{{ route('service-prices.list', $courierService->id) }}" class="breadcrumb-item">
                    {{ $courierService->courier->name ?? '' }}
                    - {{ $courierService->name ?? '' }}</a>
            </nav>
        </div>
    </div>
@endsection

@section('body')
    <div class="card">
        <div class="card-body">
            <div class="d-flex align-items-center justify-content-between m-b-15">
                <h4>Service Prices &nbsp;
                    <span class="badge tag-primary float-right mb-0" style="font-size: 13px;">
                        {{ $courierService->courier->name ?? '' }} > {{ $courierService->name ?? '' }}
                    </span>
                </h4>
            </div>

            <div class="m-t-50">
                <table id="service-table" class="table table-bordered" data-url="">
                    <thead>
                        <tr>
                            <th> &nbsp;</th>
                            @if (count($zones) && count($weightClasses))
                                @foreach ($zones as $zone)
                                    <th class="text-capitalize">{{ $zone->zone_name }}</th>
                                @endforeach
                            @elseif(!count($weightClasses))
                                <th width="90%" class="text-danger text-center"> Weight classes not available</th>
                            @elseif(!count($zones))
                                <th width="90%" class="text-danger text-center"> Zones not available</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        @if (count($weightClasses) && count($zones))
                            @foreach ($weightClasses as $weightClass)
                                <tr>
                                    <th class="text-capitalize text-center">{{ $weightClass->weight_class_name }}</th>
                                    @if (count($zones))
                                        @foreach ($zones as $zone)
                                            <td class="text-capitalize">
                                                <div class="input-group mb-3" style="width: 130px;">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text" id="basic-addon1">
                                                            {{ $courierService->currency->currency_symbol ?? '' }}
                                                        </span>
                                                    </div>
                                                    <input class="form-control d-inline-block"
                                                        name="service_price[{{ $zone->id }}][{{ $weightClass->id }}]"
                                                        value="{{ $servicePrices[$zone->id][$weightClass->id] ?? 0 }}" />
                                                </div>
                                            </td>
                                        @endforeach
                                    @endif
                                </tr>
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $('td input[name^=service_price]').change(async function() {
            let val = $(this).val();
            let url = baseURL + '/admin/billing/service-prices?_token=' + csrfToken;
            let data = $(this).serialize() + '&courier_service_id=' + {{ $courierService->id }};
            let response = await doAjaxPost(url, 'POST', data);
            notify(response.message, response.result);
        });
    </script>
@endpush